.clearfix的用法
来源：4-1 按钮+图像+文本样式
qq_鸭绿桥第一帅哥_0
2019-04-01 21:04:35
为什么无法清除浮动？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>b</title> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div class="clearfix"> <div class="pull-left" style="width: 200px;height: 200px;background: red;"></div> <div class="pull-left" style="width: 200px;height: 200px;background: green;"></div> <div class="" style="width: 200px;height: 200px;background: green;"></div> </div> </div> </body> </html>
写回答
1回答
-
你好，
1、这个布局是不对的，需要将第三个元素放在外面：
效果：
这样才可以清除上面div盒子中小盒子浮动带来的影响。
因为.clearfix类添加的是伪元素：
也就是大div盒子的子元素，并且伪元素::after是添加在了最下面，如果不将第三个盒子分离出来，第三个盒子因为没有浮动，所以清除没有效果，分离出来就看到效果了。
2、如果想要放在里面的话，需要直接在元素上添加clear属性：
自己可以测试下，祝学习愉快！
0
相似问题