浮动的定义
float 会使元素脱离文档流，造成父元素的高度塌陷。所以使用float后需要清除浮动。
通过空标签和 clear:both 来清除浮动
1 | <div class="parent">
|
2 | <div class="son">1</div>
|
3 | <div class="son">2</div>
|
4 | <div class="clear"></div>
|
5 | </div>
|
1 | .son{
|
2 | float: left;
|
3 | background: royalblue;
|
4 | width: 200px;
|
5 | height: 200px;
|
6 | }
|
7 | .clear{
|
8 | clear: both;
|
9 | }
|
缺点：需要添加很多额外的标签
给父元素设置 overflow：auto
1 | <div class="parent">
|
2 | <div class="son">1</div>
|
3 | <div class="son">2</div>
|
4 | </div>
|
1 | .parent{
|
2 | overflow: auto;
|
3 | }
|
4 | .son{
|
5 | float: left;
|
6 | background: royalblue;
|
7 | width: 200px;
|
8 | height: 200px;
|
9 | }
|
缺点：当内容增多时容易因为不会自动换行而导致内容被隐藏掉，无法显示需要溢出的元素
在父元素上添加伪元素
1 | <div class="parent clearfix">
|
2 | <div class="son">1</div>
|
3 | <div class="son">2</div>
|
4 | </div>
|
1 | .son{
|
2 | float: left;
|
3 | background: royalblue;
|
4 | width: 200px;
|
5 | height: 200px;
|
6 | }
|
7 |
|
8 | .clearfix{
|
9 | zoom: 1;
|
10 | }
|
11 | .clearfix::before,
|
12 | .clearfix::after{
|
13 | content:" "; // 生成内容作为最后一个元素
|
14 | display:block; // 使生成的元素以块级元素显示,占满剩余空间
|
15 | height:0; // 避免生成内容破坏原有布局的高度
|
16 | visibility:hidden; //使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
|
17 | clear:both;
|
18 | }
|
注：由于IE6-7不支持:after，需要使用 zoom:1触发 hasLayout