清除浮动

为什么需要清除浮动

由于父级盒子很多情况下，不方便给高度，当时盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响。

清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身具有高度，则不需要清除浮动
• 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

语法：

选择器: {
  clear: 属性值;
}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动

清除浮动策略：闭合浮动

方法：

1. 额外标签法（隔墙法），是 W3C 推荐的方法
2. 父级添加 overflow 属性
3. 父级添加 after 伪元素
4. 父级添加双伪元素

额外标签法

也称为隔墙法，是 W3C 推荐的方法。

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素（不能是行内元素），给其赋以属性 clear:both;。

<style>
  clear: both;
</style>
<div class="clear"></div>Copy to clipboardErrorCopied

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化差

总结

1. 清除浮动的本质

   清除浮动的本质是清除浮动元素脱离标准流造成的影响

2. 清除浮动的策略

   闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

3. 使用场景

   实际开发中可能会遇到，但是不常用。

父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性设置为 hidden、auto或scroll。

注意是给父元素添加代码：

• 优点：代码简洁
• 缺点：无法显示溢出部分

父级添加 after 伪元素

实际上也是额外标签法的一种。（相当于在最后一个子元素后面再添加一个元素隔开）

.clearfix::after {
  content: "";
  display: block;//伪元素为行内块元素，要转换为块级元素
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

父级添加双伪元素

.clearfix::before,
.clearfix::after {
  content: "";//前后都隔开
  display: table;//伪元素为行内块元素，要转换为块级元素
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}Copy to clipboardErrorCopied

• 优点：代码更简洁
• 缺点：照顾低版本浏览器
• 代表网站：小米、腾讯

伪元素转化为块级元素原因：根本原因是为了解决clearfix内部非浮动元素margin塌陷问题。

另发现一个新属性display: flow-root，不支持Safari。它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。其作用和clearfix一致。

参考：

为什么需要清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，应该清除浮动。