CSS清除浮动
不清除浮动会怎么样?
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
width: 300px;
border: 1px solid #000;
background-color: #aaa;
}
.left{
width: 100px;
height: 100px;
background-color: #ffff00;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #fa0000;
float: right;
}
效果:
子元素div并没有撑开父容器,这就是我们要清除浮动的原因。
解决方法:
在浮动元素后面添加 class 为 clear 的 空 div 元素,给这个 div 设置样式 .clear{clear:both;}
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
效果:
给父容器添加 overflow:hidden 或者 auto 样式
HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.container{
width: 300px;
border: 1px solid #000;
background-color: #aaa;
overflow:hidden; /*或者auto */
zoom:1; /*IE6*/
}
效果:
给父容器添加 clearfix 的 class ,用 伪元素 clearfix:after 来设置样式,清除浮动
HTML:
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
CSS:
.clearfix{
zoom: 1; /*IE6*/
}
.clearfix:after{
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
效果:
给父容器添加浮动,这种方法用于本身父元素就是浮动的情况下,一般不使用这种方法,