浮动清除与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

转载于:https://juejin.im/post/5a31f1715188256de205e6d5