清除浮动的方式

现在许多网站都是采用浮动的方式来编写网页，所以清楚如何清除浮动就显得尤为重要。下面介绍清除浮动的六种方法。

给第一个盒子设置高度

标准流的元素会撑起父元素的高度，但是浮动流的元素是不会撑起父元素的高度的。第一个盒子的元素全部浮动，所以导致第一个盒子高度为0，也就是说body中第一个元素为空，这样第二个盒子就上来成为了body中的第一行元素。当第二个盒子的全部元素都浮动时，由于它们本来是第一行的元素，所以根据浮动元素排列规则，这些元素会排在第一列浮动元素的后边，所以就会出现下面这种情况：



当设置了第一个盒子的高度时，第二个盒子就不能成为第一行的元素。如果第一个盒子高度足够时，第二个的元素设置浮动后，浮动元素不会排在第一个盒子浮动元素的后边。如下图：



还有一种情况，就是当第一个盒子高度不够时，第二个盒子的浮动元素仍然会在第一个盒子浮动元素的后面，但是不会平行排列，如下图：



首先，由于第一个盒子有高度，所以第二个盒子就不能上去成为第一行元素，从而导致了第二个盒子浮动的内容被挤下来。其次，根据浮动元素排列规则可知，当第二个盒子元素浮动时发现前面已经有了浮动的元素，所以会紧跟着前面浮动元素排列。

给第二个盒子设置clear: both;属性

clear属性有四个取值：

none: 默认取值，左浮动跟左浮动，右浮动跟右浮动

left: 清除左浮动，也就是说不同盒子里面的元素浮动时，设置了该属性的盒子里的元素不会跟在上一个盒子浮动元素的后面。右浮动无影响

right: 清除右浮动。左浮动无影响

both: 清除左浮动和右浮动

注意点：设置了clear: both;属性后margin-top属性会失效。我们在企业开发中，两个盒子用到margin属性的地方很多，所以这个方法也不是很适合。

外墙法

在两个盒子之间插入一个块级元素，并设置clear: both;属性。

完成上述操作后，就相当于有三个块级元素，也就是body中分三行。由于第二行设置了clear属性，所以第二行的元素就不会随着上一行元素的浮动而浮动。这时，第三行也就是第二个盒子里的元素会随着第二行浮动，但是第二行没有元素 ，所以第三行元素直接在第二行开头开始浮动，从而实现浮动清除。如下图：



注意点：

第一个盒子中的margin-bottom属性会失效。

企业开发中，我们有很多盒子，采用墙法会导致增加很多没有用处的盒子（墙），导致网页内存增加，所以墙法也很少用。

想要设置两个盒子之间的外边距，有两种方法：

给第二个盒子设置margin-top属性

给外墙设置高度

内墙法

在第一个盒子最后一个子元素的后边加上一个块级元素，并设置clear: both;属性。

注意点：

企业开发中，我们有很多盒子，采用墙法会导致增加很多没有用处的盒子（墙），导致网页内存增加，所以墙法也很少用。

想要给两个盒子设置外边距，有三种方法：

给第一个盒子设置margin-bottom属性

给第二个盒子设置margin-top属性

给内墙设置高度

伪元素选择器法

有关伪元素选择器详见有关博客。

性质和内墙法一样，在第一个盒子里的最后添加一个内容为空的块级元素，并设置clear: both;属性。代码如下：

.box1::after {
content: "";
display: block;
clear: both;
}

效果如下：



这种方法同样可以给：

第一个盒子设置margin-bottom属性

第二个盒子设置margin-top属性

新增加的元素设置高度

overflow: hidden;属性法

六种方式中最常用的一种，只需要给第一个盒子添加一个该属性即可。代码如下：

.box1 {
overflow: hidden;
background-color: red;
}

添加前：



添加后效果：



以上，就是清除浮动的六种方式。