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>