清除浮动的方式

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

1. 给第一个盒子设置高度

   标准流的元素会撑起父元素的高度，但是浮动流的元素是不会撑起父元素的高度的。第一个盒子的元素全部浮动，所以导致第一个盒子高度为0，也就是说body中第一个元素为空，这样第二个盒子就上来成为了body中的第一行元素。当第二个盒子的全部元素都浮动时，由于它们本来是第一行的元素，所以根据浮动元素排列规则，这些元素会排在第一列浮动元素的后边，所以就会出现下面这种情况：
   
   当设置了第一个盒子的高度时，第二个盒子就不能成为第一行的元素。如果第一个盒子高度足够时，第二个的元素设置浮动后，浮动元素不会排在第一个盒子浮动元素的后边。如下图：
   
   还有一种情况，就是当第一个盒子高度不够时，第二个盒子的浮动元素仍然会在第一个盒子浮动元素的后面，但是不会平行排列，如下图：
   
   首先，由于第一个盒子有高度，所以第二个盒子就不能上去成为第一行元素，从而导致了第二个盒子浮动的内容被挤下来。其次，根据浮动元素排列规则可知，当第二个盒子元素浮动时发现前面已经有了浮动的元素，所以会紧跟着前面浮动元素排列。

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

   clear属性有四个取值：

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

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

3. 外墙法

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

   • 第一个盒子中的margin-bottom属性会失效。
   • 企业开发中，我们有很多盒子，采用墙法会导致增加很多没有用处的盒子（墙），导致网页内存增加，所以墙法也很少用。
   • 想要设置两个盒子之间的外边距，有两种方法：
     
     1. 给第二个盒子设置margin-top属性
     2. 给外墙设置高度

4. 内墙法

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

   • 企业开发中，我们有很多盒子，采用墙法会导致增加很多没有用处的盒子（墙），导致网页内存增加，所以墙法也很少用。
   • 想要给两个盒子设置外边距，有三种方法：
     
     • 给第一个盒子设置margin-bottom属性
     • 给第二个盒子设置margin-top属性
     • 给内墙设置高度

5. 伪元素选择器法

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

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

   效果如下：
   
   这种方法同样可以给：

   • 第一个盒子设置margin-bottom属性
   • 第二个盒子设置margin-top属性
   • 新增加的元素设置高度

6. overflow: hidden;属性法

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

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

   添加前：
   
   添加后效果：
   

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