浮动清除与BFC

清理浮动一般有两种思路
一.利用 clear属性，清除浮动
二.使父容器形成BFC

一：内墙法，用clear:both这个属性的意思，我要排在浮动元素后面。

.clearfix:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden;        
}
//适配ie 
  .clearfix{zoom:1}

二：BFC
1.BFC区域有如下条件：

• 1.内部的Box会在垂直方向，一个接一个地放置。
  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  2.BFC的区域不会与float box重叠。
  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  3.计算BFC的高度时，浮动元素也参与计算

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

2.生成BFC盒子的条件 ：

  float为 left|right
  overflow为 hidden|auto|scroll
  display为 table-cell|table-caption|inline-block
  position为 absolute|fixed

        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }
                
                .ckearfix{*zoom:1;}

单独为 *zom:1解释一下，因为IE67有问题，适配有BUG要触发hsLayout，要触发hasLayout，所以用*zom:1;

个人博客： www.liangtongzhuo.com