BFC 详解

BFC(block-formating-content)

根据W3C官方文档，块格式化上下文(BFC)是CSS正常渲染的一部分，他的定位机制来自于正常流。以下几种情况可以出发BFC：:
1. float的值不是none
2. position的值不是static，也不是relative
3. display:table-cell|table-caption| inline-block|flex|inline-flex
4. overflow的值不是visible

BFC 可以显式的被触发。所以，如果我们想创建一个新的BFC，我们只需要添加上述CSS它的任何一个条件。虽然上面提到的条件中的任何一个都可以创建一个块格式化上下文，但也会有一些其他的效果：
display: table 在响应式方面可能会有一些问题
overflow: scroll 多出一个不想要的滚动条
float:元素会有一些增加浮动属性
overflow:hidden 会砍掉一些溢出的元素
因此，每当我们创建一个新的块格式上下文，要根据我们的需求，选择最合适的条件。比如说，我想要在一篇文章中隐藏溢出的部分的时候我选择 overflow:hidden

盒子在块格式化上下文中的排列

在块格式化上下文中，一个块级元素是紧靠在父元素的边缘的。从上到下依次排列开来，即使是浮动元素，也一样。

块格式化上下文会引起边距合并

父子上下外边距合并
就是父元素就没有填充有没有边框，但是子元素具有外边距，就会引起父子元素的外边距合并（上下都会合并）。那如何阻止外父子外边距合并呢？给父元素添加padding:1px;或者border:1px solid;或者overflow:hidden。
兄弟上下外边距合并
看起来父子元素不合并了，但是兄弟元素之间又产生了上下外边距合并？怎么办？只有再给子元素添加一个外包裹层。并且给子元素的包裹层增加overflow:hidden形成新的BFC。这样大家处在不同的BFC中，就不会产生外边距合并了。

使用BFC包裹浮动元素

因为浮动元素是脱离文档流的，所以会引起父元素的高度塌陷。就是所谓的父元素看不见浮动元素了。这个时候我们可以利用BFC重新包裹住浮动元素，给父元素添加 overflow:hidden

使用BFC让文字不再环绕

在一个BFC中，有两个子元素，第一个子元素发生了浮动，第二个子元素中如果有文本的话，那么第二个元素中的文本会环绕浮动元素。但是第二个子元素边框依然会触碰BFC的左边框。即使第一个子元素浮动了。
如果想要改变这种情况，则需要给第二个子元素加overflow:hidden,让第二个元素再次形成BFC。