关于如何清除浮动
在了解如何清除浮动之前，我们先了解一下为什么我们要对元素进行浮动。我们都知道，div作为一个块标签来说，它是独占一行，从上而下排列的，这就是所谓的标准流。但是，在实际应用中，我们有时需要将两个或者多个div在一行显示，这时，我们就要对元素进行浮动已达到这个结果。浮动之后的元素已经脱离了文档流，漂浮于文档流之上。下面我们先来看一标准流是什么情况？
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <style type="text/css">
8 *{
9 padding:0;
10 margin:0;
11 }
12 .box{
13 background-color:red;
14 width:100%;
15 }
16 .div1{
17 background-color:pink;
18 width:300px;
19 height:300px;
20 }
21 .div2{
22 background-color:blue;
23 width:300px;
24 height:300px;
25 }
26 </style>
27 <body>
28 <div class="box">
29 <div class="div1"></div>
30 <div class="div2"></div>
31 </div>
32 </body>
33 </html>
上面所描述的就是标准流，当我们没有给父级也就是box高度时，它的高度是由里面的内容，也就是里面的div块的高度撑起来的，而两个div块也是按照上面我们所提到的独占一行，自上而下排列的下面我们再来看一下，当我们对div块进行浮动之后，会出现什么情况。此时我们只需要给div1和div2加浮动，
.div1{
background-color:pink;
width:300px;
height:300px;
float:left; //添加浮动
}
.div2{
background-color:blue;
width:300px;
height:300px;
float:left; //添加浮动
}
从上面结果我们可以看出，两个div块占据了同一行，而且，它们已经撑不起来父级（原来的黑色区域）的高度了。这就说明它们脱离了我们的文档流，已经不占据页面空间了。需要注意的是浮动只能是左右浮动。
第二，事物总是双面的，浮动虽然给我们带来了一定的方便，但也给我们造成了一定的影响，浮动元素相当于给元素增加了一个inline-block（行内块标签），行元素浮动之后相当于给它转化成了块元素，此时可以给它设置宽度和高度；浮动元素脱离了我们的文档流，不再占据页面的高度；那么我们如何让才能消除浮动带来的影响呢，下面我们就来介绍一下清除浮动的几种常见的方法。
.box{
width:100%;
background-color:black;
height:300px;
}
.box{
background-color:black;
width:100%;
overflow:hidden;
}
第三种方法：给浮动元素添加一个空的兄弟元素，然后给它添加clear:both;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
background-color:black;
width:100%;
}
.div1{
background-color:pink;
width:300px;
height:300px;
float:left;
}
.div2{
background-color:blue;
width:300px;
height:300px;
float:left;
}
.div3{
clear:both;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
第四种方法：利用伪类 :after 清除浮动。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> *{ padding:0; margin:0; } .box{ background-color:black; width:100%; } .div1{ background-color:pink; width:300px; height:300px; float:left; } .div2{ background-color:blue; width:300px; height:300px; float:left; } .box:after{ content:""; clear:both; display:block; } </style> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> </div> </body> </html>
再利用伪类清除浮动的时候我们需要注意几个问题，
首先，我们是要给浮动元素的父级添加 :after
其次，一定要有content属性，即使内容为空，
最后，转化为块元素。display:block;
清除浮动之后的效果如下：
上述几种方法都是可以实现这种效果的哦！
