如下代码,页面中元素使用float样式
1 | <!-- GLOBAL Html --> |
clear both
clear both 清楚左右两边的浮动1
2
3
4
5
6
7.clearfix:after{
display:block;
content:'';
clear: both;
visibility: hidden;
height: 0;
}
BFC
BFC - 块级格式化上下文(Block Formatting Context),简单理解就是一个独立的盒子,各个BFC之间布局相互不影响。
会创建BFC的样式和元素查看这里:MDN BFC
BFC 清除浮动
BFC 包裹浮动的元素1
2
3.clearfix {
overflow: hidden;
}
BFC 外边距合并折叠
如下:两个父子元素 <div>
之间的外边距合并,创建新的BFC可以避免
1 | .line .lineItem { float: none; } |
.line2
.lineItem1
marginTop
发生了合并
1 | .line .lineItem { float: none; } |
如下:上下元素边距发生了折叠,可以通过创建新的BFC使会合并的元素放到不同的BFC中
1 | .line .lineItem { float: none; } |
1 | .line .lineItem { float: none; } |