理解CSS中的 BFC以及其特性

1.什么是BFC

　　1.1 BFC是块级格式上下文，是页面中，盒布局的CSS渲染模式。

 

2.BFC的特性：

　　2.1 BFC内部相邻的BOX设置margin会重叠，并且优先使用值最高的margin。

　　2.2 BFC是一个独立的区域，其内部的元素不会印象到外部，外部的元素也不会印象到内部。

　　2.3 BFC的区域不会与float的区域重叠。

　　2.4 计算BFC高度时，float区域的高度也会计算在内。

 

3.BFC形成条件：

　　3.1 浮动设置：除了float为none之外的所有属性都可以形成BFC。

　　3.2 定位设置：position设置为（absolute,fixed）。

　　3.3 display 为以下其中之一的值 inline-block，table-cell，table-caption。

　　3.4 overflow除了visible以外的所有值（hidden，auto，scroll）

 

4.BFC应用场景：

　　4.1：解决margin重叠

　　

<div class="BFC-bk">
    <p>1</p>
       <div>
          <p>如果不需要边距重叠，那么可以使用一个父级元素包裹起来，并且使用BFC即可，原理是根据以上第2.2条的特性</p>
       </div>
    <p>3</p>
    <p>4</p>
</div>

.BFC-bk{
    background-color: red;
    overflow: hidden;/*父级设置BFC*/
}
.BFC-bk P{
    margin-top: 5px;
    margin-bottom: 10px;
    background: burlywood;
}
.BFC-bk div{
    overflow: hidden;   /*使用一个div将其包裹，并且设置为BFC即可解决边框重叠*/
    background-color: antiquewhite;
}

　　

　　4.2 解决布局问题

　

<p1>两列布局，左侧固定高宽，右侧自适应</p1>
<div class="BFC-bj">
    <div>使用float进行布局</div>
    <div>使用了float后如果不把这第二个标签设置为BFC，那么当他的高度超过第一个div时，内容会与第一个元素重叠</div>
</div>

.BFC-bj{
    background: gold;
}

.BFC-bj div:nth-child(1){
    width: 200px;
    height: 50px;
    background: red;
    float: left;
}
.BFC-bj div:nth-child(2){
    height: 60px;
    background: tan;
    overflow:auto;
    /*如果不把这个标签设置为BFC，那么他会与第一个元素重叠*/
}

 

　　4.3 BFC解决浮动的边框塌陷问题

<ul class="BFC-ul">
   <li>1</li>
   <li>将父级设置为BFC，页面渲染其时高度时，会将float区域的高度也计算在内，原理根据以上2.4条的特性</li>
   <li>3</li>
</ul>

.BFC-ul{
    background: saddlebrown;
    display: inline-block;
}
.BFC-ul li{
    list-style: none;
    float: left;
    background: antiquewhite;
}

 

 

注：如有错误，请指出，共同学习 ！！！