具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。
下面介绍触发BFC及BFC带来的影响
只要元素满足下面任一条件即可触发 BFC 特性:
* body 根元素
* 浮动元素:float 除 none 以外的值
* 绝对定位元素:position (absolute、fixed)
* display 为 inline-block、table-cells、flex
* overflow 除了 visible 以外的值 (hidden、auto、scroll)
解释:因为两个div都处在body这个BFC容器中,如果要避免这种问题可以把这两个div放在两个容器中
因为浮动元素脱离了文档流,所以容器只剩下2px的高,但是将容器变成BFC,添加代码overflow:hidden
,就可以包含浮动元素了。
1、内部的Box会在垂直方向,一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时,浮动元素也参与计算
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。