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

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

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

属性值	作用
left	在左侧不允许浮动元素（清除左侧浮动的影响）
right	在右侧不允许浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的方法

清除浮动方法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;
}

<div class="box"></div>
<div class="box2"></div>

清除浮动方法3：隔墙法

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

示例：