BFC (block formatting context)
什么是BFC
- 它是一个独立的渲染区域,只有Block-levelbox参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
什么情况才会触发BFC呢
- 不是所有元素显示模式都能产生BFC
- display属性值为 block list-item table的元素,才会产生BFC
- BFC的布局特性
- 给元素添加如下属性就会触发BFC
- float属性不为none的
- position为absolute或fixed
- display为inline-block table-cell tabel-caption inline-flex
- overflow不为visible
BFC元素的特性
- 在BFC中,盒子从顶端开始垂直地一个接一个地排列
- 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中,每一个盒子的margin-left会触碰到容器的border-left
- BFC的区域不会与浮动盒子产生交集,而是紧贴边缘
- 计算BFC的高度时,自然也会检测浮动的盒子高度
BFC的主要作用
- 清除元素内部浮动
- 只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow:hidden样式,对于ie6用zoom:1也可以
- 解决外边距合并问题
- 属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠
- 制作右侧自适应的盒子问题
- 普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
总结下
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也如此.包括浮动,和外边距合并等等,因此有了这个特性,我们布局的时候就不会出现意外情况了
