今天来写一下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;
}
看代码部分我们是要让 left 和 right 两个 div 在父容器 container 里面左右浮动,看上去写的没毛病,我们来看看效果
&amp;amp;amp;lt;img src="https://pic3.zhimg.com/v2-1a122addeb4a2743bc7327343eb1f95e_b.png" data-rawwidth="359" data-rawheight="135" class="content_image" width="359"&amp;amp;amp;gt;诺,效果就是这样,子元素div并没有撑开父容器,这就是我们要清除浮动的原因。
清除浮动的几种方法
第一种方法:
在浮动元素后面添加 class 为 clear 的 空 div 元素,给这个 div 设置样式
.clear{clear:both;}
代码如下:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
.clear{
clear:both;
}
看看效果:
&amp;amp;amp;lt;img src="https://pic1.zhimg.com/v2-b14f69bfed11a82bbddfac528af07ecc_b.png" data-rawwidth="322" data-rawheight="122" class="content_image" width="322"&amp;amp;amp;gt;撑开了,达到了我们想要的效果。
撑开了,达到了我们想要的效果。第二种方法:
浮动元素后面右一个不为空的 div 元素,我们直接为这个元素添加 clear:both 样式
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="content">111</div>
</div>
.content{
clear:both;
}
&amp;amp;amp;lt;img src="https://pic1.zhimg.com/v2-5be15ad66deca8c2f15494c5e84579dc_b.png" data-rawwidth="329" data-rawheight="139" class="content_image" width="329"&amp;amp;amp;gt;
第三种方法:
给父容器添加 overflow:hidden 或者 auto 样式
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.container{
width: 300px;
border: 1px solid #000;
background-color: #aaa;
overflow:hidden;
zoom:1; /*IE6*/
}
demo 效果同第一种方法。
第四种方法:
给父容器添加 clearfix 的 class ,用 伪元素 clearfix:after 来设置样式,清除浮动
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
.clearfix{
zoom: 1; /*IE6*/
}
.clearfix:after{
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
效果同上。
第五种方法:
给父容器添加浮动,这种方法用于本身父元素就是浮动的情况下,一般不使用这种方法,
不再过多描述。
更多:
。。。