CSS:清除浮动

CSS清除浮动的方法

1、在浮动元素末尾处添加一个空的标签如

<div class="clear"></div>并在CSS中赋予

.clear{clear:both}也可以使用<br class="clear"/>或<hr class="clear">

.wrap{ border:1px solid #000; background-color:gray; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } .clear{ clear:both; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> <div class="clear"></div> </div>缺点：使用这种方法需要添加大量无语义的html元素，后期不容易维护。

2、overflow属性：给浮动元素的容器（父元素）添加overflow:hidden或overflow:auto

这种情况在IE6中还需要触发hasLayout,解决办法：为父元素设置容器宽高或设置zoom:1

原理：在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清除浮动的效果。

.wrap{ border:1px solid #000; background-color:gray; overflow:hidden; *zoom:1; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div>缺点：overflow:hidden不能和position一起配合使用，因为超出的部分会被隐藏

overflow:auto内部宽高超过父级div时，会出现滚动条

3、使用:after伪元素，给浮动元素的容器（父元素）添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素。

.wrap{ border:1px solid #000; background-color:gray; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } .clearfix:after{ content:"020"; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ zoom:1; } <div class="wrap clearfix"> <div class="left">left</div> <div class="right">right</div> </div>通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。 4、给浮动元素后面的元素添加clear属性

.wrap{ border:1px solid #000; background-color:gray; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } .content{ clear:both; } <div class="wrap clearfix"> <div class="left">left</div> <div class="right">right</div> <div class="content">浮动元素后面的元素</div> </div>5、给浮动的元素的父元素添加浮动，但是这样做会使整体浮动，影响布局，不推荐使用。 .wrap{ border:1px solid #000; background-color:gray; float:left; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } <div class="wrap clearfix"> <div class="left">left</div> <div class="right">right</div> </div>

6、父级div定义height，解决了父级无法自动获取高度的问题，只适合高度固定的布局，一般不建议使用

.wrap{ border:1px solid #000; background-color:gray; height:200px; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } <div class="wrap clearfix"> <div class="left">left</div> <div class="right">right</div> </div>7、父级div定义display:table，将div变成表格，但是会产生不可预知的问题，一般不推荐使用。

.wrap{ border:1px solid #000; background-color:gray; display:table; } .left{ float:left; height:80px; width:100px; background-color:#0F0; } .right{ float:right; height:200px; width:300px; background-color:#F09; } <div class="wrap clearfix"> <div class="left">left</div> <div class="right">right</div> </div>