JavaScript面试题解析：浮动、清除浮动、BFC

在前端开发中，CSS的布局是一个基础且关键的部分，而浮动、清除浮动和块级格式化上下文（Block Formatting Context，简称BFC）则是其中的重要知识点，也是面试的常考题。理解并掌握这些概念，对于构建高质量、响应式的网页布局至关重要。

浮动

浮动是CSS中一种使元素脱离正常的文档流，并向左或向右浮动的属性。使用浮动属性，可以实现一些特殊的布局效果，例如文字环绕图片等。第五点要格外注意，大厂面试可能会设的陷阱题。以下是浮动的主要特性：

会脱离文档流：当元素应用了浮动属性后，它会从正常的文档流中脱离，移动到父元素的左侧或右侧，直到遇到另一个浮动元素或者父元素的边缘。

为了文字环绕：浮动最初的设计目的就是为了让文字能够环绕在其他元素（如图片）周围，从而实现更灵活的布局效果。

示例代码：

<div style="width: 200px; height: 100px; float: left; background-color: rgb(32, 63, 165);"></div>
<div style="width: 400px; height: 300px;background-color: rgb(25, 151, 19);"></div>

效果：屏幕截图 2023-11-11 210502.png

让块级元素同行显示：默认情况下，块级元素会独占一行。但如果给块级元素添加浮动属性，它们就可以在同一行内显示，只要这一行的宽度足够。
让行内元素可以设置宽高：默认情况下，行内元素的宽度和高度由其内容决定，不能手动设置。但如果给行内元素添加浮动属性，它就变成了块级元素，可以自由设置宽度和高度。
浮动元素可以用margin，但是margin: auto不生效（重点！）：浮动元素可以通过margin属性来调整与其他元素的距离。但是，如果设置margin: auto，浮动元素不会自动居中，因为auto值在浮动元素上不起作用。

清除浮动

尽管浮动可以实现很多特殊的布局效果，但是如果不正确地使用，也会引起一些问题，例如父元素高度塌陷。因此，在使用浮动后，我们通常需要清除浮动。以下是清除浮动的主要方法：

给父容器设置高度：这是最直接的方法，但是不推荐使用。因为如果子元素的高度变化，父元素的高度就需要手动调整，这对于响应式布局来说是不可接受的。
增加子容器，在子容器身上清除浮动：可以在所有浮动元素后面添加一个新的子元素，并在这个子元素上应用clear属性，使其清除前面元素的浮动效果。这种方法虽然有效，但是会增加额外的DOM元素，可能影响性能。

示例代码：

HTML 结构：
```
<div class="parent">
  <div class="child" style="float: left;">我是浮动元素</div>
  <div class="clear"></div>
</div>
```
CSS 样式：
```
.parent {
  border: 1px solid black;
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
}

.clear {
  clear: both;
}
```
在这个例子中，我们首先创建了一个名为 parent 的父容器，并在其中添加了两个子元素。第一个子元素 child 应用了浮动属性，会脱离正常的文档流。如果此时我们没有做任何处理，parent 容器的高度就会塌陷（即父容器高度为0），无法包含 child 元素。

为了解决这个问题，我们在 child 元素后面添加了一个新的子元素 clear，并在其上应用了 clear: both 属性。这样，clear 元素就会清除前面 child 元素的浮动效果，使得 parent 容器能够正确地计算其高度。

需要注意的是，虽然这种方法可以有效地清除浮动，但是它会增加额外的DOM元素，可能会对性能产生一定影响。因此，如果可能，我们更推荐使用其他方法，例如利用 BFC 或者伪元素来清除浮动。
借助伪元素：这是一种更优雅的方法，它通过在父元素上添加一个伪元素，并在这个伪元素上应用clear属性，从而清除子元素的浮动效果。这种方法既不需要修改HTML结构，也不会影响性能。

示例代码：

HTML 结构：
```
<div class="parent">
  <div class="child" style="float: left;">我是浮动元素</div>
</div>
```
CSS 样式：
```
.parent {
  border: 1px solid black;
  overflow: hidden; /* 创建 BFC */
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
}

.parent:after {
  content: "";
  display: table;
  clear: both;
}
```
在这个例子中，我们首先创建了一个名为 parent 的父容器，并在其中添加了一个子元素 child，它应用了浮动属性。为了清除 child 元素的浮动效果，我们在 parent 容器上应用了 overflow: hidden 属性，以此来创建一个块级格式化上下文（BFC）。

接着，我们使用 :after 伪元素在 parent 容器的最后创建了一个匿名块级盒子，并在其上设置了 clear: both 属性。通过这样的方式，我们实现了对 child 元素浮动效果的清除，同时避免了在HTML结构中增加额外的元素，保持了代码的整洁性和可维护性。
BFC：利用BFC的特性，可以自动清除内部元素的浮动效果。这是一种最推荐的方法，后面会详细介绍。

BFC（Block Formatting Context）

BFC，即块级格式化上下文，是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互边界。BFC可能会是实习面试的一个考点

如何创建BFC：

浮动：元素的float不是none。
定位：元素的position为absolute或fixed。
行内块：元素的display为inline-block。
表格单元：元素的display为table-cell或者table-caption或者其他，table开头的大部分都有这个作用。
overflow：元素的overflow不是visible。
弹性盒子：元素的display为flex或inline-flex。

BFC容器的特性：

内部盒子也会按照文档流的顺序排列。
BFC容器在计算高度时，会将内部浮动的子元素的高度也计算在内。

示例代码：

HTML结构：
```
<div class="parent">
  <div class="child" style="float: left;">我是浮动元素</div>
  <div class="sibling">我是兄弟元素</div>
</div>
```
CSS样式：
```
.parent {
  border: 1px solid black;
  overflow: hidden; /* 创建 BFC */
}

.child {
  width: 100px;
  height: 100px;
  background-color: red;
}

.sibling {
  margin-top: 20px;
  background-color: blue;
}
```
在这个例子中，我们有一个名为 parent 的父容器，其中包含一个浮动的子元素 child 和一个兄弟元素 sibling。如果不对 parent 容器进行处理，由于 child 元素浮动脱离了文档流，parent 容器的高度可能会塌陷，导致其兄弟元素 sibling 产生重叠。

为了解决这个问题，我们在 parent 容器上应用了 overflow: hidden 属性，这会触发它创建一个块级格式化上下文（BFC）。通过创建BFC，parent 容器就可以正确地包含其内部的浮动元素，并且避免了兄弟元素 sibling 的边距重叠问题。

总的来说，通过创建BFC，我们可以更好地控制布局，解决一些常见的布局问题，使得页面呈现更加可靠和一致。
解决外边距重叠的问题。

示例代码：

HTML结构：
```
<div class="parent">
  <div class="child1">子元素1</div>
  <div class="child2">子元素2</div>
</div>
```
CSS样式：
```
.parent {
  border: 1px solid black;
  overflow: hidden; /* 创建 BFC */
}

.child1, .child2 {
  margin: 20px;
}
```
在这个例子中，假设 .child1 和 .child2 元素都具有外边距，根据标准的外边距合并规则，它们的外边距会发生合并，导致实际的外边距可能会比期望的外边距小。

为了阻止外边距合并，我们在父容器 .parent 上创建了一个块级格式化上下文（BFC），通过设置 overflow: hidden 属性来实现。这样一来，.parent 就成为了一个独立的上下文，其内部的外边距不再会与外部元素的外边距合并，从而保持了预期的外边距效果。、

总结起来，浮动、清除浮动和BFC是CSS布局中的基础知识，理解并掌握这些知识，对于构建高质量、响应式的网页布局至关重要。希望通过这篇文章，你能对这些知识点有更深入的理解。

js 面试常考题——浮动、清除浮动、BFC

JavaScript面试题解析：浮动、清除浮动、BFC

浮动

清除浮动

BFC（Block Formatting Context）

如何创建BFC：

BFC容器的特性：