css清除浮动的集中方法

一：浮动产生的副作用

　　1.父元素的背景不能显示

　　2.父元素的边框不能撑开

　　3.padding和margin失效

二：清除浮动的方法

　　1.给父元素设置高度：这样可以清除浮动，但是子元素内容高度不固定，这种方法就不合适

　　　　

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

　　

　　css样式：

　　　　

.outer{
  width:400px;
  height:400px;
  background-color:#e4393c;
  border:1px solid #ccc;
}
.inner1{
  width:100px;
  height:100px;
  float:left:
}
.inner2{
  width:100px;
  height:100px;
  float:left:
}

　　2.使用clear:both;可以实现清除浮动，在最后一个子元素上加上clear:both;

　　　　

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
    <div class="inner3"></div>
</div>

　　

.outer{
  width:400px;
  height:400px;
  background-color:#e4393c;
  border:1px solid #ccc;
}
.inner1{
  width:100px;
  height:100px;
  float:left:
}
.inner2{
  width:100px;
  height:100px;
  float:left:
}
.inner3{
  clear:both;
}

　　3.给父元素添加overflow:hidden/auto;可以清除浮动

.outer{
  overflow:hidden;
}

　　4.  :after的方法，最好的方法

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
</div>

　　

/*清除浮动*/
		.clearfix{
			display:inline-table;
			display:block;
			zoom:1;
		}
		.clearfix:after{
			clear:both;
			content:'.';
			display:block;
			height:0;
			visibility:hidden;
		}
		.clearfix:after, .clear:before{
			display:table;
			content:'';
			line-height:0;
		}

　　在需要清除浮动的地方加上这个class就行