css之BFC机制

Posted 2021-09-27 Infogami

一，BFC定义，

全称，block formatting content,格式化上下文；是web页面中盒模型布局中的css渲染模式，是一个独立的渲染区域或说一个隔离的独立容器。

二，形成条件

1，浮动元素，float除none以外的值。
2，定位元素，position(absolute，fixed)
3,display为inline-block,table-cell,table-caption(类似于表格标题标签caption)
4，overflow除visible以外(scroll,hiddle,auto)的值.

三，特性

1，内部的BOX会在垂直方向一个接着一个放。
解释：即使不在BFC的内的盒子也是一样的。
2，垂直方向的距离由margin值决定。
解释：正常文档流中，盒子的垂直距离也是由上下盒子的最大margin决定的。
应用：因此可以用overflow:hidden触发BFC机制，将该属性加载父元素上。扯个题外话，用空标签也是能解决外边距合并问题。
3，BFC区域内的元素不会和float元素重叠，
解释：不会被浮动元素覆盖
应用：
两栏布局：左边固定，右边自适应布局。

float: left; width: 200px;height: 300px;（左边元素）
overflow: hidden;/*创建bfc */height: 300px;（右边元素）

三栏布局（圣杯布局）左右两边固定宽度，中间不设宽，因此中间的宽度自适应。

float: left; width: 100px; height: 300px;（左边元素）
float: right; width: 100px; height: 300px;（右边元素）
overflow: hidden;/*创建bfc*/ height: 300px;（中间元素）

4,计算bfc的高度时，浮动元素也参与计算。
解释:BFC包含浮动的块。
应用：利用overflow:hidden清除浮动嘛，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。
5，BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
应用：解决外边距合并问题。

    <div class="container">
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>

.container { 
                overflow: hidden; 
                width: 100px; 
                height: 100px;
            } 
.wrapper {      
            overflow: hidden;
         } 
.box1 { 
        height: 20px; 
        margin: 10px 0;
      } 
.box2 { 
        height: 20px; 
        margin: 20px 0; 
      }