原文
清除浮动的原因
当给元素添加上浮动的时候，会造成页面布局上的一些意想不到的结果，如：子元素设置浮动无法撑起没有设置高度的父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width:300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上下边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下。
image.png
清除浮动的方式
1、加高度
这是最简单的办法，加上高度之后，让包含框包含浮动框，不过这不适用于高度不明的包含框。
2、加额外空标签并且定义clear：both属性从而清除浮动
这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美，一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="clearfix"></div>
</div>
<div class="footer"></div>
</body>
</html>
3、通过将包含框设置成BFC从而清除浮动
3.1、通过伪类元素清除浮动
通过伪类元素实现清除浮动的效果，或者说通过伪类元素形成一个BFC的块框，从而让内部的float的元素不影响到外部元素的排版，也就是不会出现因为出现浮动而撑不起盒子高度的情况。
zoom:1：是为了兼容IE浏览器的haslayout布局属性，触发其布局效果，产生和BFC类似的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
/* 新浪使用方式
.clearfix:after{
content: '';//设置内容为空
height: 0;//高度为0
line-height:0;//行高为0
display: block;//将文本转为块级元素
visibility: hidden;//将元素隐藏
clear: both;//清除浮动
}
*/
.clearfix{ /*兼容 IE*/
zoom: 1;
}
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
3.2、通过overflow:hidden清除浮动
通过给父元素设置overflow:hidden;来将父元素变成一个BFC，从而清除浮动。
缺点：这种方式会隐藏超出包含框的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
overflow: hidden;
zoom: 1;/*兼容 IE*/
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
3.3、通过绝对定位清除浮动
通过给父元素同样设置浮动属性，或者设置position:absolute来将包含框设置为BFC的布局，但是设置了这两个属性就会让父元素脱离了文档流从而产生其它的问题。
网友评论