清除浮动的五种方法

浮动的作用
- 早期的作用:图文环绕
- 现在的作用: 布局页面,让垂直布局的盒子变成水平布局
- 浮动（float）是一种布局方式，可用于实现图文混排、多列布局等效果。设置了元素的浮动属性后，该元素会脱离文档流，并向左或向右浮动，同时其他元素也会环绕在其周围。
- 清除浮动就是消除浮动元素带来的影响，防止它们对其他元素的定位和布局产生干扰。如果不清除浮动，可能会出现一些意想不到的问题，如高度塌陷、文字重叠等。
- 优点: 简单粗暴, 方便
- 缺点: 有些布局中不能固定父元素高度
- 清除浮动（clear float）就是指让浮动元素的高度被包含在其中的父元素中，避免造成父元素高度塌陷，从而影响布局。下面介绍五种常用的清除浮动方法：

1.额外元素法

通过向最后一个浮动元素后添加一个空元素并设置 clear 属性为 both，从而清除浮动。

html 复制代码 <div class="container">
  <div class="float-left">浮动元素1</div>
  <div class="float-left">浮动元素2</div>
  <div style="clear:both;"></div>
</div>

优点:通俗易懂.书写方便 W3C推荐.
缺点:添加无意义的标签,让页面的HTML结构变得复杂

2.使用overflow属性

给包含浮动元素的容器添加 overflow 属性值为 auto 或 hidden，从而清除浮动。

html 复制代码 <div class="container" style="overflow:auto;">
  <div class="float-left">浮动元素1</div>
  <div class="float-left">浮动元素2</div>
</div>

3.使用 after 单伪元素(父级添加)

使用 ::after 伪元素在包含浮动元素的容器内部插入一个空元素，并设置 clear 属性为 both，从而清除浮动。


.clearfix::after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

4.父元素设置高度

使用 BFC（块级格式化上下文）将包含浮动元素的父元素变成一个新的块级格式化上下文，从而清除浮动。

css 复制代码 .container {
  overflow: hidden;
}

优点：简单粗暴，方便.
缺点：有些布局中不能固定父元素高度

5.双伪元素清除法(父级添加)


.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

以上五种方法都可以有效地清除浮动，各有优劣。使用时要根据具体情况选择合适的清除浮动方式，以达到理想的布局效果。

BFC

通俗理解：BFC 是一个独立的布局环境,也可以理解为一个存在于页面上独立的容器, bfc盒子和子元素有他们自己的摆放规则,不影响其他盒子摆放,其他盒子在页面中摆放也不会影响到bfc的盒子