BFC 浮动

说BFC:

 

BFC是css中定义的规范:

BFC(Block Formatting Context) 块级格式化上下文，指的是页面布局中的一块区域，它拥有自己的渲染规则，决定自己的子元素如何布局，和其他元素的关系和作用。

 

只要元素满足下面任一条件即可触发 BFC 特性：

 

1.body根元素

2.float 不为 none

3.overflow不为visible的

4.position:不为static/relative

5.display:flex ,display:inline-block

 

 

对于BFC 内部的元素:

 

1. 同一个 BFC 下外边距会发生折叠

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

 2. BFC 可以包含浮动的元素（清除浮动）

我们都知道，浮动的元素会脱离普通文档流，

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。