BFC特性&BFC作用

BFC特性

1. 内部box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
4. 形成了BFC的区域不会与float box重叠 计算BFC高度时，浮动元素也参与计算。
5. 生成BFC还有：行内块元素、网格布局、contain值为layout、content或 strict的元素等。 更多生成BFC的方法：传送门

BFC作用

1. **利用特性4可实现左图右文之类的效果：**
   

<img src='image.png'>
<p>我是超长的文字<p>

img {
    float:left
}
p {
    overflow:hidden
}

2. **利用特性5可以解决浮动元素造成的父元素高度塌陷问题：**
   

<div class='parent'>
    <div class='float'>浮动元素</div>
</div>

.parent {
    overflow:hidden;
}
.float {
    float:left;
}