清楚浮动的方法和BFC、hasLayout

清理浮动两种方式

1. 利用 clear属性，清除浮动
2. 使父容器形成BFC

考虑下列情景：

 html:
  <div class = 'outer'>
      <div class= 'inner'>
            第1个div
      </div>
      <div class='inner'>
            第2个div
      </div>
      <div class='inner'>
            第3个div
      </div>
  </div>
 css:
 .outer{
     padding:10px 10px;
     border:solid 1px #a33;
 }
 .inner{
      width: 30%;
      margin-left:5px;
      text-align: center;
      background-color:rgb(60,179,113);
      float:left;
 }

希望是这样：

预期.png

实际上却是这样：

实际.png

为什么会这样呢？

在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

解决办法

1. 在浮动元素新增一个非浮动元素用来清楚浮动

  <div class = 'outer'>
      <div class= 'inner'>
            第1个div
      </div>
      <div class='inner'>
            第2个div
      </div>
      <div class='inner'>
            第3个div
      </div>
          <div style="clear:both;">
          </div>
  </div>

<b>原理</b>：是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。
<b>优缺点</b>：这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

2. 父辈见overflow:hidden,激发BFC清楚浮动

  <div class = 'outer' style= "overflow:hidden;">
  ....

<b>原理：</b>BFC可以包含浮动，清除这个父元素中的子元素浮动对页面的影响。
<b>优缺点:</b>一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

3. 通过CSS语句添加子元素,利用:after伪元素,给父类加新样式。

  <div class = 'outer clearfix">
  ....

  .clearfix:after { // "clearfix"是父容器的class名称
      content: ""; //"content:"";"是在父容器的结尾处放一个空白
      display: block;//是确保这个空白是非浮动的独立区块。
      height: 0;
      clear: both;
  } 
  .clearfix {
      zoom: 1;//:after选择符IE 6不支持,我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性
  }

<b>原理：</b>after伪选择符可以在父容器的尾部自动创建一个子元素，不用额外添加一个元素。
<b>使用频率很高</b>

• <b>其它就不介绍了，大同小异。例如：双伪元素清除浮动、浮动的父容器等。</b>

附录：BFC和hasLayout简单介绍

<b>BFC:</b>就是block formatting context的缩写，中文就是“块级格式化上下文”的意思。它有三个特性：

• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠.
  因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

• BFC不会重叠浮动元素

• BFC可以包含浮动

<b>触发BFC的情形</b>

• float的值不为none
• position的值不为static或者relative
• display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
• overflow的值不为visible

<b>hasLayout:</b>我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。

<b>看看怎么使元素hasLayout为true.</b>

• position: absolute
• float: left|right
• display: inline-block
• width: 除 “auto” 外的任意值
• height: 除 “auto” 外的任意值
• zoom: 除 “normal” 外的任意值
• writing-mode: tb-rl

<b>简单介绍这么多，细节可自行Google。</b>