一、什么是BFC

BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域,只有块参与,它规定了内部的块元素如何布局,并且与这个区域外部毫不相干。

二、BFC的布局规则

  1. 内部的Box会在垂直方向,一个接一个的布置。
  2. 属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. BFC的区域不会与float box重叠。
  4. BFC容器里面的元素不会影响到外面的元素。
  5. 计算BFC的高度时,浮动元素也参与计算。

三、触发BFC的条件

  1. 根元素(html)
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block,table-cell,table-caption,flex,inline-flex
  5. overflow不为visible

四、BFC的应用

1.根据BFC规则3实现“自适应两栏布局”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        html,body{height:100%;}
        .left{
            width:200px;
            height:100%;;
            background:orange;
            float:left;
        }
        .right{
            height:100%;
            background:pink;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

2.根据BFC规则5解决高度塌陷

...