面试官问BFC还不会？血泪经验讲透BFC原理

最新推荐文章于 2024-06-20 20:20:21 发布

DazzlingWen.

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量100

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_52372698/article/details/123783257

版权

<html>
<body>
<div id="root" style="border:1px solid red;">
    <div style="width:10px;height:10px;margin:10px;"></div>
    //垂直塌陷，20+10=20
    <div style="width:10px;height:10px;margin:20px;"></div>
</div>
</body>
</html>

root元素的高 (通过getComputedStyle(root).height计算) 为？

答案：70px（我的答案是80，脑子简单了hh）

BFC牛逼！！！！

好吧回归正题，BFC的特点就是每一个BFC区域都是相互独立，互不影响的

概念性解释一下：

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素

<div class="box1" id="HM_bfc1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5" id="HM_bfc2">
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
</div>

看上面代码，#HM_bfc1和#HM_bfc2都是BFC区域，相互独立，互不影响，也就是说，HM_bfc1只包含子元素box2345，而不包含678

触发BFC的条件

body根元素
设置浮动，不包括none
设置定位，absoulte或者fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

分清楚BFC区域

<body>
    <div class="box1" id="HM_bfc1">
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5" id="HM_bfc2">
            <p>123</p>
            <p>123</p>
        </div>
    </div>
</body>

body元素是一个BFC（body为根元素），这个BFC区域包含box1，但不包含box2345，值得注意的是，box1和box2345都不是一个BFC区域

应用场景

解决外边距的塌陷问题

<style>
    .box2,
    .box3,
    .box4,
    .box5 {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 50px;
        /* overflow: hidden; */
    }

    .xx {
        overflow: hidden;
    }
</style>

<div class="box1" id="HM_bfc1">
        <div class="xx">
            <div class="box2"></div>
        </div>
        <div class="xx">
            <div class="box3"></div>
        </div>
        <div class="xx">
            <div class="box4"></div>
        </div>
        <div class="xx">
            <div class="box5" id="HM_bfc2">
                <p>123</p>
                <p>123</p>
            </div>
        </div>
</div>

具体的解决方案就是，让这个盒子成为一个BFC区域，那就是往他的外面套一个父盒子，把父盒子设置为overflow: hidden

DazzlingWen.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试官问BFC还不会？血泪经验讲透BFC原理

<html><body><div id="root" style="border:1px solid red;"> <div style="width:10px;height:10px;margin:10px;"></div> //垂直塌陷，20+10=20 <div style="width:10px;height:10px;margin:20px;"></div></div>...
复制链接

扫一扫

面试官问BFC还不会？血泪经验讲透BFC原理

“相关推荐”对你有帮助么？