对BFC(块级格式化上下文)的理解

一、定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是页面中的一个独立渲染区域。其内外元素在布局上毫不相干。

二、BFC触发方式

1. float属性值不为: none

2. position属性值为: absolute || fixed

3. display属性值为: inline-block || flex

4. overflow属性值不为: visible

三、BFC布局规则

1. 浮动的元素会被父级计算高度（父级触发了BFC）

2. 非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3. margin不会传递给父级（父级触发了BFC）

4. 两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

四、BFC实现自适应两栏布局

css代码:

 *{
    margin: 0;
    padding: 0;
  }
  .cont{
    width: 1200px;
    margin: 10px auto;
    border: 1px solid black;
  }
  .left-box{
    width: 200px;
    height: 100px;
    background-color: pink;
    /* 左侧盒子浮动 */
    float: left;
  }
  .right-box{
    height: 100px;
    background-color: blue;
    /* 触发右侧盒子的BFC */
    overflow: hidden;   
  }

HTML代码:

<div class="cont">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

效果图:

自适应两栏布局.png