CSS 清除浮动与BFC的方法

在使用浮动时，会出现父元素高度无法自适应子元素高度的问题，此时可以采用“清除浮动”的方法来解决。常用的两种清除浮动的方法如下：

1. CSS 清除浮动

在使用浮动时，会出现父元素高度无法自适应子元素高度的问题，此时可以采用“清除浮动”的方法来解决。常用的两种清除浮动的方法如下：

1.1. 使用clear属性

给父元素添加一个样式，使用clear属性来清除浮动。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

这里使用伪元素 ::after，清除所有浮动的影响。

1.2. 使用overflow属性

设置父元素的 overflow 属性为 auto 或 hidden，可以清除浮动。

.parent {
    overflow: hidden;
}

这种方法的局限性而言就是会隐性地限制父元素的滚动。但是它的好处时不需要清除浮动单独开一个div，也会自动适应高度。

1. BFC的方法

BFC（Block Formatting Context）指的是块级格式化上下文，是HTML元素的一种渲染规则。BFC具有如下特性：

• BFC内的元素布局不会影响到BFC外元素；
• BFC区域不会与浮动元素叠放；
• BFC区域是一个独立的区块，不会影响其他元素的布局。

在BFC中可以使用以下两个方法来清除浮动：

2.1. 利用父元素成为BFC

将父元素设置为BFC（例如使用overflow、float等属性），可以解决浮动问题。

.parent {
    overflow: hidden;
}

利用BFC原理，父元素在创建BFC之后会独立成一个块级盒子，不会受到浮动元素的影响，从而清除浮动。

2.2. 使用浮动

在父元素中添加一个空的块级元素，并将其浮动。这个块级元素会占据所有子元素的位置，从而实现清除浮动的效果。

<div class="parent">
  <div class="child1">Child1</div>
  <div class="child2">Child2</div>
  <div class="clear"></div>
</div>

.parent {
  border: 1px solid #000;
}

.child1, .child2 {
  width: 100px;
  height: 100px;
  float: left;
  background-color: yellow;
  border: 1px solid #000;
}

.clear {
  clear: both;
}

这里使用了一个名为 clear 的块级元素来清除浮动。该元素使用 clear: both 属性，使其不允许任何浮动元素占据其左、右两侧，从而使父元素获得了正确的高度。