BFC的理解与应用

BFC (Block Fromatting Context)块级格式化上下文，是一个独立的渲染区域，内部元素的渲染不会影响外边的元素。

形成BFC的条件

• float属性不是none；
• position是absolute或fixed；
• display是inline-block, table-cell, table-caption, flex, inline-flex；
• overflow不是visible；

BFC的应用

1. 避免margin纵向重叠问题

未形成BFC，造成的margin纵向重叠问题演示

下面是形成BFC后的页面效果：

	<div class="bfc">
        <div class="box1">box1</div>
    </div>
    <div class="box2">box2</div>

 		.bfc{
            overflow: hidden;
        }
        .box1{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
        }

2. 避免脱离文档流，造成高度塌陷问题

首先演示一下，因为脱离标准文档流，而造成高度塌陷的问题。

页面结构代码：

    <div class="bfc">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>

页面样式代码：

 		.bfc{ //现在它还不是BFC，不要被这个样式名吓到
            /* overflow: hidden; */
            border: 1px solid #000;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
        }

高度塌陷页面效果：

将CSS代码中 overflow: hidden 注释去掉，形成BFC后的页面效果：

3. 避免浮动元素对页面覆盖

未形成BFC形成页面覆盖效果演示：

老样子先上HTML代码:

    <div>
        <div class="box1">浮动元素</div>
        <p>
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
            我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
        </p>
    </div>

然后是CSS代码:

        .box1{
            float: left;
            width: 200px;
            height: 200px;
      
            background-color: red;
        }
        p{
        	/* overflow: hidden; */
            background-color: green;
        }

最后是效果展示：

再去掉CSS的注释，形成BFC效果：

结语

到此本章就结束了，谢谢大家的观看！

如有问题欢迎各位指正