BFC

来举例说明吧

<div class="parent">
    <div class="son">
    
    </div>
</div>

再配上点css

.parent{
    border: 4px solid cyan;
}
.son{
    background: pink;
    float: left;
    height:100px;
    width:200px;
}

此时效果如下：

如何让父元素包住子元素呢，有以下几种方法

1. float:left;
2. position:absolute;
3. display:inline-block;
4. overflow !== visble;
5. display: table-cell;
6. display: table;
7. display:table-caption;
8. display: flow-root; 推荐使用

这就是印证了CSS规范中对BFC的描述：

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并在一个块格式化上下文中 ，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄)。

总结一下BFC有两个功能，其一 是包住其中的元素， 其二是是两个相邻元素界限分明，其三是清除浮动。
js.jirengu.com/hicud/4/edi…