浮动的原理，是元素脱标不占位，类似于水中的物体浮动到表面，那么何时在网页布局中何时需要清除浮动呢？
时机（原因）：
父元素（这里指的的div盒子）没有指定高度，并且子元素全部都设置了浮动，造成了脱标，此时父元素没有高度成为了一个线，父元素后边的元素会顶到元素后，给我们的主观感受就是在浮动的子元素下边，这个时候就是会造成布局混乱，此时我们需要清除浮动。
下面看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" >
* {
margin: 0;
padding: 0;
}
.content {
width: 200px;
height: 200px;
background-color: pink;
}
.fl_content {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.footer {
width: 220px;
height: 150px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="content">
<div class="fl_content"></div>
</div>
<div class="footer"></div>
</body>
</html>此时是父元素也就是父盒子有高度，此时子元素设置了浮动，父元素后的footer元素的位置是没问题的，但是如果此时我们将父元素的高度去掉，再看下效果：
改动代码：
.content {
width: 200px;
/* height: 200px; */
background-color: pink;
}此时发现，父盒子中的子盒子还在原来的位置，但是父盒子后的footer盒子跑到了上边，这个原因就是父元素没有高度，子元素浮动了，脱标不占位置，导致父元素此时只是看不见一条线。
下面来说解决的办法：
有以下几种方法：
1. 添加标签法 （不推荐）
该方法是在最后一个浮动的子盒子后面添加一个标签，给其设置clear:both属性
<div class="content">
<div class="fl_content"></div>
<div class="clear"></div>
</div>.clear {
clear: both;
}
此时浏览器查看效果：
不推荐理由：添加无意义标签，语义性不强。
2. 父元素添加overflo:hidden （不推荐）
.content {
width: 200px;
/* height: 200px; */
background-color: pink;
overflow: hidden;
}不推荐理由：如果盒子中的元素有溢出，溢出的部分将无法显示
3. 伪元素清除浮动
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
/* 兼容IE */
.clearfix{
zoom: 1;
}<div class="content clearfix">
<div class="fl_content"></div>
<!-- <div class="clear"></div> -->
</div>
这种方法推荐使用。
扫一扫
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
