深入学习CSS3中的浮动、清除浮动以及BFC

做测试题的时候遇到了一个关于BFC的题目，what？什么是BFC，然后我赶紧上网查阅了各种文章以及博客，自己又动手实践了。终于把浮动和清除浮动以及BFC的问题搞清楚了，捋一下思路，总结在一起，对浮动问题有疑问的以及不了解BFC是什么的看过来喽！

一、float定义

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。按照张鑫旭的说法浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。

注意：如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。另外，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

二、浮动带来的布局问题

浮动虽然可以便于页面布局，但使用浮动会产生一些问题：最常见的问题如下

1、影响它的兄弟元素的位置：具体的影响方式要看兄弟元素是块级元素还是内联元素，若是块级元素，会无视这个浮动的块框，使得自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖，除非这些div设置了宽度，并且父元素的宽度不足以包含这个兄弟元素，兄弟元素才会被强制换行；若是内联元素，则会尽可能围绕浮动元素

浮动元素对块级兄弟元素的影响

    <style>
            #box{width:700px; height:70px; border:1px solid #000; padding:10px; color:#fff;  line-height:70px;}
            .bro1{  width:400px;  float:left;}
            .bro2{background:blue;}
    </style>
<div id="box">
    <div class="bro1">我设置了左浮动 float: left ,但没有设置背景色。</div>
    <div class="bro2">我没有设置浮动，设置了蓝色背景色。</div>
</div>

我设置了左浮动 float: left ,但没有设置背景色。

我没有设置浮动，设置了蓝色背景色。

可以看出，第一个div并没有设置颜色，但实际却为蓝色背景，这是因为元素浮动后，它的块级元素会无视它的位置，仍然占据整一行，而div的内容则会自动调整，正是这样的处理，使到实际使用浮动布局时产生很多未知影响。

2、它的父元素会产生高度塌陷（当父元素没有设置高度的时候）。

浮动元素的内联兄弟元素与高度塌陷

<style>
            #box{width:800px; border:1px solid #000; padding:10px; color:#fff; }
            .bro1{ width:400px;  float:left;  background:#ff9900; height:40px; line-height:40px; margin-left:20px;}
            .bro2{background:blue;}
</style>
<div id="box">
    <div class="bro1">我设置了左浮动 float: left ,并设置橙色背景色。</div>
    <span class="bro2">我是 span ，没有设置浮动，设置了蓝色背景色。</span>
</div>

我设置了左浮动 float: left ,并设置橙色背景色。

我是 span ，没有设置浮动，设置了蓝色背景色。

这里同时看出两个问题。一是内联元素会围绕在设置了浮动的元素周围，而不会像块状兄弟元素那样占据一整行。另外由于浮动的元素是脱离文档流，因此父元素只会以没有浮动的 span 的高度为基础撑开自己，这就会造成父元素“塌陷”了。

三、清除浮动

显然，我们使用浮动的初衷是为了让布局更简单，但显然这不利于布局，因此我们需要想办法清除这些影响，那么下面我们就聊聊怎么清除浮动嘞

浮动虽然可以便于页面布局，但同时会产生一些问题，也就是我们常说的“副作用”。而一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明。

清除浮动常见的方法，大的方面分为两点：1、使用clear清除浮动2、触发BFC（后面会详细详细的聊聊滴）

细分如下：

1、使用clear，它的值可以是（both，left，right，none，inherit），分别代表在元素左右两侧不允许出现浮动元素，左侧不允许出现浮动元素，右侧不允许出现浮动元素，不清楚浮动，继承父元素的值。至于要用哪一个要视情况而定（后面两个不怎么用）

2、加入空div的方法（在浮动元素和不想让浮动元素之间插入一个空的div，然后对其设置clear：both），其实还是使用clear:both。空div方法很方便，但是加入了没有涵义的 div，这违背了结构与表现分离的原则，并且后期维护也不方便。

3、overflow方法。在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ，可以闭合浮动。只是 overflow 并不是为了闭合浮动而设计的，因此当元素内包含会超出父元素边界的子元素时，可能会覆盖掉有用的子元素，或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。

4、使用after + zoom方法（此处内容借用张鑫旭博客的说法）

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如content:'clear both';没问题，或是content:'张鑫旭'也是ok的。于是有：

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height：0也是可以的。显然，相对来说，这个办法不但完美兼容主流浏览器，并且也很方便，使用重用的类，可以减轻代码编写，另外网页的结构也会更加清晰。

下面是我写的代码

    <style>
        div {padding: 15px; color: #000; }
       .left{float:left;}
       .main{background:red; width:400px;}
       .aside{background:#ff9900;}
        .clearfix {zoom: 1; border: 1px solid #9a9a9a;  width:800px; }
        .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    </style>
<div class="clearfix">
    <div class="main left">我设置了左浮动 float: left</div>
    <div class="aside left">我是页脚，但是我也设置了左浮动。</div>
</div>

效果如图(content,display,clear不可少)

当然清除浮动的方法不止上面几种，我们说过，利用BFC特性，触发BFC并清除浮动都是可以的。

结合语义化的要求，在实际的项目中，可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法，较为方便，在如内部元素全部为浮动元素，并且内容不会超出父元素框等情况可以直接采用 overflow 方法，但该方法毕竟会触发 BFC ，BFC 的特性是有多个的，为了避免不必要的影响，如果实际需要清除浮动元素的布局比较复杂，可以直接采用 :after 伪元素方法。

四、BFC

下面我们来聊聊BFC（Block Formatting Context）：块级格式化上下文，从样式上看，它与普通的容器没有什么区别，但是从功能上，BFC可以看做是隔离了的独立容器，容器里面的元素不会再布局上影响到外面的元素，并且，BFC具有普通容器没有的一些特性。

通俗的解释一下：BFC相当于一堵围墙，当你触发了一个元素的BFC，那么就相当于在这个元素的四周建立起了一堵围墙，那么这时候围墙里的元素和外面的元素就不会产生相互影响

所以触发BFC的条件

浮动元素：float除了none以外的值
使用定位，position（absolute，fixed）
display为inline-block,table-cells,table-captions其中之一的值
overflow除了visible以外的值（hidden，auto，scroll）
flex boxes(元素的display:flex或inline-flex)

BFC的特性：

BFC会阻止外边距折叠：我们知道两个相连的div在垂直上的外边距会发生折叠（这里涉及到外边距折叠的知识点，不太了解外边距折叠原理的请点击css外边距折叠原理），当我们触发了BFC的时候，就阻止了外边距折叠
BFC可以包含浮动的元素：（解决因为浮动导致的高度塌陷问题）这里就是使用了overflow：hidden/auto方法闭合浮动的原理。W3C 的原文是“'Auto' heights for block formatting context roots”，也就是 BFC 会根据子元素的情况自动适应高度，即使其子元素中包括浮动元素。但是 IE6-7 并不支持 W3C 的 BFC ，而是使用自产的 hasLayout 。从表现上来说，它跟 BFC 很相似，只是 hasLayout 自身存在很多问题，导致了 IE6-7 中一系列的 bug 。触发 hasLayout 的条件与触发 BFC 有些相似
BFC可以阻止元素被浮动元素覆盖：浮动元素的块状兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发 BFC 后可以阻止这种情况的发生。