BFC

2019-08-11 本文已影响0人你喜欢吃青椒吗_c744

原文：[布局概念] 关于CSS-BFC深入理解

面试的时候尽量不讲定义，而是讲例子。

定义

BFC全称叫做（Block Formatting Context）。中文叫块级格式化上下文
BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素。
BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

触发条件

满足下列条件之一就可触发BFC：

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也参与计算。

作用

自适应两栏布局
可以阻止元素被浮动元素覆盖
可以包含浮动元素——清除内部浮动
分属于不同的BFC时可以阻止margin重叠

作用细讲

阻止margin重叠

布局1.gif

上面的box：margin-bottom: 100px;下面的box：margin-top: 100px;（他们是同一侧的margin，所以会发生margin重叠的情况，两个div的距离实际上只有100px。）

如何解决：当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

操作方法：给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠。

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;//margin属性
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin属性
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;//此时已经触发了BFC属性。
        }

清除浮动

给父divpar加上 overflow: hidden;

清除浮动原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内，此时已成功清除浮动。

阻止元素被浮动元素覆盖

布局2.gif

左侧的盒子向左浮动，脱离文档流。所以更大的那个盒子会覆盖更小的盒子。我要他们不覆盖要怎么做？

清除浮动。
利用BFC。加上一个overflow: hidden，生成一个BFC，自然会清除浮动。

//利用BFC
<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
        .main {
            height: 200px;
            overflow: hidden;//触发main盒子的BFC
            background: #fcc;
        }
           .text{
            width: 500px;
    }

自适应两栏布局

布局3.gif

还是上面的代码，此时BFC的区域不会与float box重叠，因此会根据包含块（父div）的宽度，和aside的宽度，自适应宽度。

BFC

定义