一:浮动产生的副作用
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就行