BFC和浮动

一、BFC

BFC基本概念

BFC（块级格式化上下文），是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。它与普通的块框类似，但不同之处在于:

（1）可以阻止元素被浮动元素覆盖。

（2）可以包含浮动元素（清除浮动）。

（3）可以阻止margin重叠。

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

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block、table-cell、table-caption

【5】position的值为absolute或fixed

BFC原理

定义BFC的元素不会与block元素重叠。

BFC约束规则

• 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）。
• 处于同一个BFC中的元素相互影响，可能会发生外边距重叠。
• 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算。
• 浮动盒区域不叠加到BFC上。

BFC使用场景

• 阻止元素被浮动元素覆盖（原理是BFC不与float元素重叠）。

例如两个div排列在一起，左边的使用了float，那么右边的div就会侵入左边，解决方法是给右边的div设置overflow:hidden，这样就给右边的div创建了BFC。常用于自适应两栏布局。

<div class="wrapper">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style type="text/css">
    .left{
        width: 200px;
        height: 200px;
        background: red;
+       float: left;
    }
    .right{
        width: 200px;
        height: 200px;
+       overflow: hidden;
        background: orange
    }
</style>

• 包含浮动元素，即清除浮动。

当给子元素设置了float的时候，父元素的高度会坍塌，因为给父元素计算高度的时候，子元素如果是float则不会参与高度计算，解决方法是给父元素设置overflow：hidden。即给父元素创建BFC。

• 阻止margin重叠（垂直方向）。

垂直方向上，取两个边距的最大值。解决margin重叠，给父元素创建BFC。比如3个p标签垂直方向上margin重叠，那么就需要给其中一个p标签设置父元素，并给这个父元素设置BFC，比如 overflow:hidden;

二、浮动

浮动的概念

• 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
• 浮动的元素可以内联排列。
• 浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，造成父元素高度坍塌。

清除浮动

主要有两种方式：clear清除浮动和BFC清除浮动。

• clear清除浮动

clear:both 不允许元素的左边或右边挨着浮动元素，原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

清除浮动最佳方案：after伪元素 + clear:both 。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom：1;
}

解释：

（1）content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的。

（2）display:block 使生成的元素以块级元素显示,占满剩余空间;

（3）height:0 避免生成内容破坏原有布局的高度。

（4）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

（5）clear：both用来闭合浮动的。

（6）zoom：1 触发IE6/7 hasLayout。

• BFC容器清除浮动

BFC的触发方式：

// 给父元素添加以下属性来触发BFC
1. float: left | right
2. overflow: hidden | auto | scroll
3. display: table-cell | table-caption | inline-block | flex | inline-flex
4. position: absolute | fixed