理解BFC

BFC全称 Block Formatting Context，是web上一种css的渲染方式，能够让浮动和其他元素进行互动的区域。
默认情况下，整个文档都是一个BFC，BFC内部会发生诸如margin重叠，浮动元素之后的元素需要清除浮动等等。

但其实这个根元素就是其中一种能够触发BFC的元素，所有能够触发BFC的元素有：
1、根元素或者包含根元素（iframe）
2、float不是none的浮动元素
3、position为absolute或者fixed
4、display为inline-block
5、display为table-cell，默认表格单元格
6、display为table-caption，默认表头
7、匿名表格单元格元素 display为table、table-row、table-row-group、table-header-group、table-footer-group、inline-table，默认的表格、行、tbody、thead、tfoot
8、overflow不是visible
9、display为flow-root
10、content为layout、content、strict
11、display为flex、inline-flex的直接子元素
12、网格元素，display为grid、inline-grid的直接子元素
13、多列容器，column-count、column-width不为auto
14、column-span为all，疑似bug

BFC的元素会包含包裹创建它的元素内部的所有内容。浮动和清除浮动只会影响同一个BFC内部的元素。

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      
<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

image.png

一般如何清除浮动，我们会加overflow:auto:

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    overflow: auto;
}

.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}      
<div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
</div>

image.png

理解BFC

推荐阅读更多精彩内容