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>