BFC布局

BFC概念

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

(Block formatting context) “块级格式化上下文”。它属于普通流。

具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。 （可以理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部）。

BFC 布局规则

1.内部的Box会在垂直方向，一个接一个地放置。

2.垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）

<style type="text/css">
    #green {
        margin:10px 10px 10px 10px
    }
    #blue {
        margin:10px 10px 10px 10px
    }
    #red {
        margin:10px 10px 10px 10px
    }
    body {
        writing-mode:tb-rl;
    }
</style>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>

3.每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）。

4.BFC的区域不会与float box重叠。（当把元素的float属性设为left，它们都不在正常流中，更不在BFC中了，同样不论水平还是竖直方向，都不会发生叠加）

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.计算BFC的高度时，浮动元素也参与计算,防止产生高度塌陷问题。

触发BFC

只要元素满足下面任一条件即可触发BFC特性：

• body根元素
• 浮动元素：float除none以外的值
• 绝对定位元素：position（absolute、fixed）
• display为inline-block、table-cells、flex
• overflow除了visible以外的值（hidden、auto、scroll）

特性及应用

阻止垂直外边距（margin-top、margin-bottom）折叠

属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠。只要将两个元素别放在一个BFC中即可。

<div class="div1"></div>
<div class="div1"></div>
<style type="text/css">
	.div1{
    width: 100px;
    height: 100px;
    background: pink;
    margin: 100px;
}
</style>

    

解决方法：

<div class="div2">
<div class="div1"></div>
</div>	
<div class="div2">
<div class="div1"></div>
</div>
<style type="text/css">
	.div1{
    width: 100px;
    height: 100px;
    background: pink;
    margin: 100px;
}
.div2{
	overflow:hidden;
}

包含浮动元素 

<div class="second">
    <div class="float">
    </div>
    <div class="s1"> 
        环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串
        环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串环绕的字符串
    </div>
</div>   
<style type="text/css">
.second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
}
.float{
    float: left;
    width: 200px;
    height: 50px;
    background: salmon;
}
.s1{
    background: slategray;
}
</style>

解决：消除环绕（清除内部浮动）

.s1{
	overflow: hidden;
    background: slategray;
}

问题：元素内容比较少的时候，会出现高度坍塌

解决：改变坍塌（上述BFC布局第六个规则）

.second{
        width: 400px;
        padding: 10px;
        border: 1px solid slateblue;
        overflow: hidden;
       //或者 overflow: auto;
}