likes
comments
collection
share

你必须会的经典面试题——清除浮动和BFC的关系

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

浮动介绍：

在 JavaScript 中，“浮动”通常指的是 CSS 中的浮动（float）属性，它用于控制元素在页面中的布局方式。

当一个元素被设置为浮动时，它会脱离文档流，意味着其他元素会忽略它的存在并继续在文档中定位。浮动的元素会尽量向其容器的左侧或右侧移动，直到碰到容器的边缘或其他浮动的元素。这使得元素能够在页面上创建复杂的布局结构，比如实现多栏布局或者文字环绕图片等效果。

浮动：

1 .实现文字环绕效果

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

3 .浮动可以让一个块级元素水平排列

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

浮动效果

<style>
        img {
            width: 100px;
             float: left;
            }
</style>
    <div class="box">
        <img src="https://img1.baidu.com/it/u=3387871259,1653657207&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">
        <p>会议指出，改革开放是党和人民事业大踏步赶上时代的重要法宝。当前和今后一个时期是以中国式现代化全面推进强国建设、民族复兴伟业的关键时期。面对纷繁复杂的国际国内形势，面对新一轮科技革命和产业变革，面对人民群众新期待，必须继续把改革推向前进。这是坚持和完善中国特色社会主义制度、推进国家治理体系和治理能力现代化的必然要求，是贯彻新发展理念、更好适应我国社会主要矛盾变化的必然要求，是坚持以人民为中心、让现代化建设成果更多更公平惠及全体人民的必然要求，是应对重大风险挑战、推动党和国家事业行稳致远的必然要求，是推动构建人类命运共同体、在日趋激烈的国际竞争中赢得战略主动的必然要求，是解决大党独有难题、建设更加坚强有力的马克思主义政党的必然要求。全党必须自觉把改革摆在更加突出位置，紧紧围绕推进中国式现代化进一步全面深化改革。</p>
    </div>

1.

你必须会的经典面试题——清除浮动和BFC的关系

使用 float:left 实现文字环绕效果，导致元素脱离文档流，此时图片并没有盖住文字。

你必须会的经典面试题——清除浮动和BFC的关系

可以使用绝对定位 position: absolute 仍然使元素脱离文档流，并实现覆盖效果。

2.

你必须会的经典面试题——清除浮动和BFC的关系

如何让块级元素出现在同一行？

你必须会的经典面试题——清除浮动和BFC的关系

  1. 使用 float: left 进行浮动布局，所以浮动可以让块级元素水平排列
  2. 使用 display：inline-block 设置，不过此时的三个块级元素会有间隙，这是由于 li 标签的换行导致，可以在 ul 下用 font-size: 0 消除

3. 插入一点：使用 margin 可以设置浮动元素，但是不能使用 margin： 0 auto 设置

附上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul {
            font-size: 0;
        } */
        li {
            list-style: none;
        }
        .item{
            width: 200px;
            height: 50px;
            /* display: inline-block; */
            float: left;
            margin-right: 10px;
            margin: 0 auto;
        }
        .item:first-child{
            background-color: rgba(255, 0, 0, 0.658);
        }
        .item:nth-child(2){
            background-color: blue;
        }
        .item:last-child{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>
</body>
</html>

以上就是浮动的简单介绍。

清除浮动（重点）

清除浮动方法：

1. 设置父元素的高度

2. 在父元素结束之前添加一个空元素，并设置 clear: both;

3. 借助伪元素 ：：after 清除浮动

4. 把父容器设置成 BFC 容器

5. 给后面受影响的元素设置 clear: both;

一个子元素的浮动会导致其父容器的高度塌陷，进而导致其他元素的布局。清除浮动的目的就是让其父容器的高度不塌陷。

你必须会的经典面试题——清除浮动和BFC的关系

你必须会的经典面试题——清除浮动和BFC的关系

会发现 div 和 ul 来到了同一行，此时 ul 的高度为0，标题和子元素并列在同一行，这就违背了正常的布局效果，要实现标题在上，元素在下的效果布局：

1. 通过 ul { height: 50px; } 直接在父容器的身上设置高度。

2. 在父元素结束之前添加一个空元素，并设置 clear: both;

.clear { clear:both; }

3. 借助伪元素 ：：after 清除浮动（优雅解法）

ul::after{ content: ''; clear: both; display: block; }

4. 把父容器设置成 BFC 容器 （后续详细介绍BFC）

5. 给后面受影响的元素设置 clear: both; 父容器便不会受影响。

附上完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        .item {
            width: 200px;
            height: 50px;
            float: left;
        }

        .item:first-child {
            background-color: rgba(255, 0, 0, 0.658);
        }

        .item:nth-child(2) {
            background-color: blue;
        }

        .item:nth-child(3) {
            background-color: green;
        }
        /* 清除浮动 */
        /* ul {
            height: 50px;
        } */

        /* .clear {
            clear:both;
        } */
        ul::after{
            content: '';
            clear: both;
            display: block;
        }
        /* ul{
            overflow: hidden;
        } */
        
    </style>
</head>

<body>
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <!-- <div class="clear"></div> -->
    </ul>
    <div class="title">这是标题</div>
</body>

</html>

最终的效果：

你必须会的经典面试题——清除浮动和BFC的关系

详细掌握浮动布局的消除很有必要，步骤方法也需要多多调试看看执行效果。

BFC

介绍： 即Block Formatting Context --- 块级格式化上下文

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

BFC容器在计算高度时，浮动元素也参与计算 --- 清除浮动

你必须会的经典面试题——清除浮动和BFC的关系

设置一个wrap容器和一个子容器box，在wrap容器内添加 margin-top: 100px;，这这是相对于body下的顶部100像素，实现下图的距离效果。

你必须会的经典面试题——清除浮动和BFC的关系

作为wrap的子容器box，在box中设置 margin-top: 50px; ,应该橙色会相对于蓝色往下移动50像素，并且上方留有50像素的蓝色边框，但是发现并没有任何的效果，事实上，box直接将父容器wrap往下拽，这是CSS中存在的一个BUG，这就margin重叠。

margin重叠

只发生在上下，不发生在左右。这就要使用BFC布局规则。

BFC布局规则：通过 overflow: hidden; 设置为BFC容器。

  1. 内部的BOx会在垂直方向，一个接一个地放置
  2. BFC容器内部和外部的容器相互隔离，互不影响 -- 解决margin重叠问题
  3. BFC容器内，在垂直方向上相邻元素的margin会重叠
  4. BFC容器在计算高度时，浮动元素也参与计算 --- 清除浮动

你必须会的经典面试题——清除浮动和BFC的关系

你必须会的经典面试题——清除浮动和BFC的关系

这里发现第一个li的底部和第二个li的顶部重叠了，所以在BFC容器内，在垂直方向上相邻元素的margin会重叠。（左右不会）

触发BFC

  1. overflow: hidden || auto || overlay || scroll
  2. flaot: left || right
  3. position: absolute || fixed
  4. display: inlne-block
  5. display: table-cell || table-xxx
  6. display: flex || inlne-flex

使用如上的方法就可以触发BFC容器。深刻理解清除浮动和BFC容器的关系，希望面前的你也能在面试中游刃有余。

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