likes
comments
collection
share

前端面试必考题：清除浮动？BFC秒了

作者站长头像
站长
· 阅读数 31

前端面试一定逃不掉的问题就是清除浮动，由此能引出一系列问题：为什么用浮动，为什么要清除浮动，怎么清除浮动，进而引出BFC如何清除浮动，BFC的规则，以及BFC能解决margin重叠问题，怎么触发BFC等等。是不是听的头都大了，本来以为是个一两句话就能解决的问题，竟然这么多弯弯绕绕。不慌，本文带友友一通到底，帮友友们捋明白

一：浮动作用

1.实现文字环绕效果

float 属性允许元素浮动并使其周围的文本围绕其周围流动

<style>
        img {
            float: left;
            margin-right: 16px;
        }
    </style>
<body>
    <img src="image.png" alt="Image" width="300" height="300">
    <p>文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p> 
</body>

前端面试必考题：清除浮动？BFC秒了

2.导致一个元素脱离文档流

float 属性不仅可以用于实现文字环绕效果，还可以用来使元素脱离文档流。当一个元素设置了 float 属性后，它会脱离文档流，从而影响到后续元素的布局。

    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 16px;
        }
        .box1 {
            background-color: red；
        }
        .box2 {
            background-color: blue;
             float: left;
        }
        .box3 {
            background-color: green;
        }
    </style>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>

第二个 .box 元素设置了 float: left，这会导致它脱离文档流，使得第三个 .box 元素紧随第一个 .box 元素下方，与第二个 .box 重合。

前端面试必考题：清除浮动？BFC秒了前端面试必考题：清除浮动？BFC秒了

3.可以让块级元素水平排列

要让块级元素水平排列，可以使用 float 属性

 <style>
        .item {
            float: left;
            width: 100px;
            height: 100px;
            background-color: gray;
            margin: 8px;
        }
    </style>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>

前端面试必考题：清除浮动？BFC秒了

4.浮动元素可以用margin,但是不能使用margin: 0 auto

由于浮动元素已经脱离了正常文档流，它们不再受到容器的影响，因此无法使用 margin: 0 auto 来居中。要居中浮动元素，可以使用其他方法，比如使用负边距或相对定位。这是个面试中容易踩坑的点，友友们要格外注意哦

二：清除浮动

为什么要清除浮动?

浮动元素会脱离文档流，这可能会导致父元素的高度塌陷，因为浮动元素不被视为计算父元素高度的一部分。这种现象称为“浮动元素引发的父元素高度塌陷”。如果不处理这个问题，可能会对页面布局造成不良影响，例如导致其他元素重叠或者错位

清除浮动有以下方法：

1.设置父元素的高度

在已知子元素高度的情况下，可以在CSS中手动设置父元素的高度

2.添加空元素并设为clear:both

在父元素内部添加一个空元素，并设置 clear: both。这种方法虽然可行，但不是最佳实践，因为它引入了额外的HTML标记，增加了代码复杂性。

<div class="parent">
    <div class="child1">Child 1</div> 
    <div class="child2">Child 2</div> 
    <div style="clear: both;">&nbsp;</div> 
</div>

3.伪元素 ::after

利用伪元素 ::after 创建一个匿名元素，然后将其 clear 属性设置为 both，可以达到清除浮动的目的。这是一种更为优雅的方式，不需要额外的HTML标记。

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

4.BFC

创建一个 BFC（Block Formatting Context）容器可以使父元素自动包含浮动元素。

5.clear:both

给受到影响的元素设置 clear: both，使其跳过浮动元素。

.affected-element { 
    clear: both;
}

虽然有以上可行的五种方法，但在实际开发中其中，利用伪元素 ::after 和创建 BFC 是较为推荐的做法，因为它们既简洁又易于维护。

三：BFC 布局规则

1.子元素垂直排列

在 BFC 中，元素会按照从上至下的顺序依次排列，就像常规文档流一样，元素之间不会发生交叉重叠，除非设置了特殊的定位属性（如 position）。

2.内外隔离

BFC 容器内的元素与其他 BFC 容器是相互隔离的，它们之间的外边距不会重叠。这对于避免元素间的外边距合并问题非常有用，例如在不同 BFC 容器中的元素之间设置的外边距不会互相叠加。

3.相邻元素的margin会重叠

在同一个 BFC 容器内，相邻元素的外边距会发生重叠，可以通过调整元素样式来控制间距。

4.浮动元素参与计算高度

BFC 容器中浮动元素也会被计入 BFC 容器的高度计算中。也就是说BFC 容器会自动扩展以包含浮动子元素，能够解决浮动元素导致的父元素高度塌陷问题。

请看下面这段代码，能够完全展示BFC的布局规则：

    <style>
        .parent {
            overflow: hidden; /* 创建 BFC */
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-bottom: 16px;
        }
        .float-child {
            float: left;
        }
        .parent2 {
            overflow: hidden; /* 创建另一个 BFC */
            padding: 16px;
            border: 1px solid black;
        }
        .child2 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-bottom: 16px;
        }
        .float-child2 {
            float: left;
        }
    </style>
<body>
    <div class="parent">
        <div class="child">Child 1</div>
        <div class="child float-child">Child 2</div>
        <div class="child">Child 3</div>
    </div>

    <div class="parent2">
        <div class="child2">Child 4</div>
        <div class="child2 float-child2">Child 5</div>
        <div class="child2">Child 6</div>
    </div>
</body

前端面试必考题：清除浮动？BFC秒了

1. 内部的 Box 会在垂直方向，一个接一个的放置

在这个示例中，.parent 和 .parent2 都创建了 BFC。我们可以看到 .child 和 .child2 元素按照从上至下的顺序依次排列，没有发生交叉重叠。

2. BFC 容器内部和外部的容器相互隔离，互不影响（解决 margin 重叠问题）

观察 .parent 和 .parent2 之间的距离，它们的外边距没有重叠。这是因为它们属于不同的 BFC，遵循各自的布局规则。

3. BFC 容器内，相邻元素的 margin 会重叠

在 .parent 和 .parent2 内部，.child 和 .child2 相邻元素的外边距发生了重叠。例如，.child 和 .child float-child 之间的外边距只显示一次，而不是两次。

4. BFC 容器在计算高度时，浮动元素也参与计算

注意 .parent 和 .parent2 的高度都包含了浮动元素 .float-child 和 .float-child2。如果没有创建 BFC，那么 .parent 和 .parent2 的高度将会塌陷，因为浮动元素不会被计入其高度计算中。但是在这里，由于设置了 overflow: hidden，它们能够正确地包含浮动元素。

四：触发BFC

1. overflow: hidden, auto, overlay, scroll

将元素的 overflow 属性设置为 hidden, auto, overlay 或 scroll 时，该元素会成为一个 BFC。这会导致元素的内容溢出部分被隐藏，同时解决浮动元素导致的父元素高度塌陷问题。

2. float: left 或 right

将元素的 float 属性设置为 left 或 right 时，该元素会成为 BFC。允许元素向左或右浮动，同时解决浮动元素导致的父元素高度塌陷问题。

3. position: absolute 或 fixed

将元素的 position 属性设置为 absolute 或 fixed 时，该元素会成为 BFC。使元素相对于最近的已定位祖先元素定位，从而解决浮动元素导致的父元素高度塌陷问题。

4. display: inline-block

将元素的 display 属性设置为 inline-block 时，该元素会成为 BFC。让元素像行内元素那样布局，同时具有块级元素的行为，比如宽度和高度可设置。

5. display: table.*

将元素的 display 属性设置为 table, table-row, table-cell 等值时，该元素会成为 BFC。可以使元素以表格形式布局，解决浮动元素导致的父元素高度塌陷问题。

6. display: flex 或 inline-flex

将元素的 display 属性设置为 flex 或 inline-flex 时，该元素会成为 BFC。这会让元素采用弹性盒模型布局，方便实现响应式设计，同时也解决浮动元素导致的父元素高度塌陷问题。

转载自:https://juejin.cn/post/7400942119081377844
评论
请登录