css 清除浮动和bfc

如下代码,页面中元素使用float样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- GLOBAL Html -->
<div class="line line1 clearfix">
<div class="lineItem"></div>
<div class="lineItem"></div>
<div class="lineItem"></div>
</div>
<div class="line line2 clearfix">
<div class="lineItem lineItem1"></div>
<div class="lineItem"></div>
<div class="lineItem"></div>
</div>

<style>
.line {
padding: 20px;
background-color: #a3a2a2;
}
.line+.line {
margin-top: 20px;
}
.lineItem {
width: 100px;
height: 100px;
background-color: #00bcd4;
float: left;
}
.lineItem+.lineItem {
margin-left: 20px;
}
</style>

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
2
3
4
.line .lineItem { float: none; }
.line { padding: 0 !important; }

.line2 .lineItem1{ margin-top: 20px; }

.line2 .lineItem1 marginTop 发生了合并

创建BFC
1
2
3
4
5
6
.line .lineItem { float: none; }
.line { padding: 0 !important; }

.line2 .lineItem1{ margin-top: 20px; }

.line2 { overflow: hidden; }

如下:上下元素边距发生了折叠,可以通过创建新的BFC使会合并的元素放到不同的BFC中

相邻边距合并
1
2
3
4
.line .lineItem { float: none; }
.line { padding: 0 !important; }

.line1 .lineItem:last-child { margin-bottom: 20px; }
创建BFC
1
2
3
4
5
6
.line .lineItem { float: none; }
.line { padding: 0 !important; }

.line1 .lineItem:last-child { margin-bottom: 20px; }

.line1 { overflow: hidden; }