CSS-清除浮动的7种方法详解

迷南。 2023-06-02 12:55 26阅读 0赞

在实际的开发过程中很多情况下父级盒子不方便给高度，但是子级元素设置了浮动就不再占有原来的空间，如果父级元素中没有别的子级元素最后父级盒子高度为 零，就会影响下面的标准流盒子的布局；所以为了解决这种问题就要清除元素浮动后带来的影响

清除浮动主要是通过 CSS 的 `clear` 属性，常用的属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>在左侧不允许浮动元素（清除左侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>在右侧不允许浮动元素（清除右侧浮动的影响）</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>同时清除左右两侧浮动的影响</td> 
  </tr> 
 </tbody> 
</table>

#### 清除浮动的方法 ####

##### 清除浮动方法1：给浮动的元素的祖先元素加高度 #####

*  如果一个元素要浮动，那么它的祖先元素一定要设置高度（高度不小于浮动的元素的高度）
 *  只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素；所以就清除浮动带来的影响了

##### 清除浮动方法2：给浮动元素的下一个兄弟元素设置 `clear: both;` #####

*  网页实际开发中，很少通过设置 height 来清除浮动的影响，元素的高度一般有内容来决定；所以上面的的方法1，工作中很少用到
 *  通过该方法可以不设置 height，也可以将浮动的影响清除了
 *  使用该方法清除浮动会有一个非常大的问题，垂直方向的 margin 会失效（无法设置 margin）

示例：

.box { 
      width: 200px;
      height: 200px;
      /* 设置浮动 */
      float: left;
      background-color: red;
    }
    
    .box2 { 
      width: 200px;
      height: 200px;
      /* 清除浮动 */
      clear: both;
      /* 设置的 margin 无效 */
      margin-top: 50px;
      background-color: blue;
    }

![在这里插入图片描述][20191004230357722.png]

#### 清除浮动方法3：隔墙法 ####

*  在浮动的元素与下面紧挨着的未浮动的元素之间放置一个元素用于清除浮动
 *  通过该方法可以解决 margin 失效的问题，不过这种方法会导致页面的结构混乱，使用过多不利于页面的维护

示例：

.box11, .box22 { 
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .box11 { 
      /* 设置了浮动 */
      float: left;
    }
    .box22 { 
      /* 设置了 margin */
      margin-top: 10px;
      background-color: yellow;
    }
    /* 利用中间元素来清除浮动 */
    .cl { 
      clear: both;
    }

![在这里插入图片描述][20191004231830745.png]

如果父级元素中的所有子元素都设置了浮动，想在父元素之外通过 **隔墙法** 来清除浮动的影响，虽然可以实现但是父级元素的高为 零（父级元素无法被清除浮动的元素撑出高度）

/* 父元素设置边框 */
    .parent { 
      border: 1px solid gray;
    }
    .box, .box2 { 
      width: 200px;
      height: 200px;
    }
    
    .box { 
      /* 设置浮动 */
      float: left;
      background-color: red;
    }
    .box2 { 
      background-color: blue;
    }
    
    /* 用于清除浮动 */
    .clearfix { 
      clear: both;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

可以通过**内墙法**来解决这个问题

#### 清除浮动方法4：内墙法 ####

*  所谓的内墙法就是在浮动元素的父级元素的内部末尾添加一个元素用于清除浮动带来的影响
 *  通过这种方法可以解决父元素没有高度的问题，但是同样是增加了元素影响 DOM 结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

#### 清除浮动方法5：使用 :after 伪元素清除浮动 ####

*  在浮动元素的**父元素**上通过 CSS 来添加伪元素，不会增加 DOM（html结构）解决了方法 3和4 中的问题
 *  官方推荐伪元素写成 `::` 但是为了兼容考虑还是写成单冒号 `:`
 *  由于伪元素是由 css 渲染 ，所以 JS 获取不到
 *  IE6-7不支持 `:after`，可以使用 `zoom:1` 来触发 `hasLayout`

.box { 
      border: 1px solid red;
    }
    .box1, .box2 { 
      width: 200px;
      height: 200px;
      background-color: purple;
    }
    .box1 { 
      float: left;
    }
    /* 设置清除浮动 */
    .clearfix:after { 
      /*必要的属性*/
      content: '';
      /* 为了不影响布局将高设置为 零 */
      height: 0;
      /* 转为块级元素 */
      display: block;
      /* 设置元素不可见 */
      visibility: hidden;
      /* 清除浮动 */
      clear: both;
    }
    /* 触发 hasLayout */
    .clearfix{ 
      *zoom: 1;
    }
    .box2 { 
      background-color: green;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]

#### 清除浮动方法6：双伪元素清除浮动 ####

*  在浮动元素的**父元素**的内容之前和之后都添加上伪元素用于清除浮动

/*清除浮动*/
    .clearfix:before, .clearfix:after{ 
    	content: "";
    	/* 会触发 BFC（块级格式化上下文） */
    	display: table;
    }
    .clearfix:after{ 
    	clear: both;
    }
    .clearfix{ 
    	*zoom: 1;
    }

#### 清除浮动方法7：父元素设置 `overflow` 属性 ####

*  设置的 `overflow` 的属性值可以是 `hideen`、`auto`、`scroll`，设置了该属性会触发 BFC 来实现清除浮动的目的
 *  给浮动元素的的父级元素添加该属性，就可以让父级元素的高随子元素的内容的变化而变化，margin 也不会失效

[20191004230357722.png]: /images/20230601/475ca02247cb4a3eb994679bdd4b9bc7.png
[20191004231830745.png]: /images/20230601/27a45495129c4fff812879b7a6e72042.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/4424e1f531664e58b6cd11a4b4cfc3f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/18547ff8393e4951908c17d68c62f278.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/6683612cee3f4fb88ae7c2b72d803894.png