清除浮动方法
触发父元素的BFC
给父元素添加如下任意属性：
// position
position: absolute;
position: fixed;
// display
display: table-cell;
display: table-caption;
display: inline-block;
// overflow
overflow: hidden;
overflow: auto;
overflow: scroll;
overflow: overlay;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
父元素也浮动
这样一来父元素和子元素一起脱离文档流，这样父元素就能自适应子元素的高度。这种方法的缺点：会直接影响父元素之后的元素排列，从而引发其他问题。
给父元素设置固定高度
但是这个方法只适用于已知子元素高度的情况，该方法缺点：不灵活，难以维护。
在浮动元素后添加空元素
在浮动元素后添加空元素，通过给空元素添加clear:both;来达到清除浮动的目的。该方法缺点：会增加无意义的标签。
伪元素::after(最佳常用)
为浮动的最后一个子元素设置伪元素::after。
.box::after {
content: '';
display: block;
clear: both;
}
1
2
3
4
5
2
3
4
5
← 各种布局实现