块格式化上下文（block formatting context）：我们无法去定义BFC到底是什么，就如同我们无法定义堆叠上下文一样，但当我们看到一种形式就能知道它是不是BFC，一个BFC有以下两个功能。
面试的时候不要解释BFC是什么，描述他的两个功能并举例！！
如何触发BFC：
浮动元素，即元素的float不为none
绝对定位元素，即元素的position为absolute、fixed
行内块级元素inline-block
overflow的值不为visible的块元素
一、清除浮动（用BFC可以包住它内部的浮动元素）
html：
<body>
<div class="baba">
<div class="erzi">
</div>
</div>
</body>css：
.baba{
border: 10px solid red;
min-height: 10px;
display: flow-root; /*触发BFC*/ //还可以使用float：left； position：absolute； display：inline-block； overflow：auto/hidden；
}
.erzi{
background: green;
float:left;
width: 300px;
height: 100px;
}输出效果：
二、用 float + div 做左右自适应布局
html：
<body>
<div class="gege">gege</div>
<div class="didi">didi</div>
</body>css：
.gege{
width: 400px;
min-height: 600px;
border: 3px solid red;
float: left;
margin-right: 20px;
}
.didi{
min-height: 400px;
border: 5px solid green;
display: flow-root; /*触发BFC*/
}输出效果：
3478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
