6.浮动——高度塌陷（BFC）

沙丁鱼意大利面

已于 2024-07-24 19:57:16 修改

阅读量368

点赞数 3

分类专栏：前端之路文章标签： css css3 javascript

于 2024-07-24 16:42:28 首次发布

本文链接：https://blog.csdn.net/ShawLee0925/article/details/140658321

版权

前端之路专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决高度塌陷问题————BFC</title>
    <style>
        /* box1没有指定高度，其高度由内部子元素的高度撑开 */
        .box1{
            
            border: 10px red solid;
        }
        .box1>.box2{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            text-align: center;
            line-height: 200px;
        }
        .box3{
            width: 300px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">box2</div>
    </div>
    <div class="box3">box3
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt consectetur unde nihil earum blanditiis, praesentium facere quo officiis ea repellat magnam. Doloremque voluptatem veritatis eveniet consequuntur excepturi animi officiis. Labore.
    </div>
</body>
</html>

box1没有指定宽高，由于其是文档流中的块元素，所以宽度默认是父元素的全部,即<body></body>的全部，其高度由内部子元素的高度决定,所以box1内部的box2多高，就决定了box1多高。

但是，当box2设置浮动之后，box2脱离文档流，导致box1内部高度降低，所有元素上移补位，这就导致了我们在利用浮动进行布局时，会产生一些高度塌陷的情况，导致布局变得混乱。

解决方法：

1. 直接将其包含块的内容指定高度，这样一来，包含块的高度写死之后，其高度就无法根据子元素的高度变化而变化。

     /* box1没有指定高度，其高度由内部子元素的高度撑开 */
        .box1{
            width: 300px;
            height: 300px;
            border: 10px red solid;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfa;
            text-align: center;
            line-height: 200px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }

2.BFC(块级格式化环境)

可以将BFC可以理解为一个隐藏的属性，开闭BFC之后，元素便会具备一下属性：

子元素的垂直外边距，不会传递给父元素（解决了外边距折叠的问题）。
元素不会被浮动所覆盖。
元素可以包含浮动元素。

开启BFC的方法：（任何开启bfc的方法都有其副作用）

浮动会开启元素的bfc（让父元素跟着子元素一起浮动）

        .box1{
            float: left;
            border: 10px red solid;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfa;
            text-align: center;
            line-height: 200px;
        }
        .box3{
            width: 300px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }

通过包含块也浮动，可以使得包含块的高度由浮动的子元素的高度决定。

但是我们发现，这里虽然box1的高度可以有box2的高度变化而变化，但是box1,box2都浮动，后续不浮动的box3自动补位上移，也会影响之后不浮动的元素。

将包含块的overflow属性设置为一个非visible的值，一般是hidden最佳。

        /* box1没有指定高度，其高度由内部子元素的高度撑开 */
        .box1{
            overflow: hidden;
            border: 10px red solid;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfa;
            text-align: center;
            line-height: 200px;
        }
        .box3{
            width: 300px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }

将包含块通过display设置为flow-root。（副作用最小）

        /* box1没有指定高度，其高度由内部子元素的高度撑开 */
        .box1{
            display: flow-root;
            border: 10px red solid;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #bfa;
            text-align: center;
            line-height: 200px;
        }
        .box3{
            width: 300px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
<style>
    /* ------------------------开启BFC之后，子元素的垂直外边距不会传递给父元素。------------------------ */
    /*
         为什么给box1加上边框之后，外边距也不会折叠？
            因为给box1加上边框之后，子元素的外边距和父元素的外边距就不是同一个外边距，两个之间差一个父元素的边框，就不会发生重叠。
    */
    .box1{
        width: 400px;
        height: 400px;
        background-color: #bfa;
        display: flow-root; /* 开启元素的BFC */
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: brown;
        margin-top: 50px;
    }
    /* -------------------------开启BFC之后，元素不会被浮动元素所覆盖。----------------------------------- */
    .box3{
        width: 200px;
        height: 200px;
        background-color: chartreuse;
        margin-bottom: 100px;
        float: left;/* 浮动之后，元素脱离文档流，在其元素会向包含块内的内容区左侧或右侧移动 */
    }
    .box4{
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        margin-top: 100px;
        display: flow-root;/* 开启bfc之后，box3浮动，box4没浮动，但是box4自动上移到box3的左边，并不会是直接上移被覆盖 */
    }
    /* ---------------------------------开启BFC之后，元素可以包含浮动的子元素。------------------------------------- */
    .box5{
        width: auto;
        height: auto;
        background-color: crimson;
        display: flow-root;/* 开启bfc之后，box5不会再因子元素浮动，丧失内容而高度消失 */ 
    }
    .box6{
        width: 200px;
        height: 200px;
        background-color: darkorchid;
        float: left;
    }

</style>
</head>
<body>
    <!-- 
        1.开启BFC之后，子元素的垂直外边距不会传递给父元素。
        2.开启BFC之后，元素不会被浮动元素所覆盖。
        3.开启BFC之后，元素可以包含浮动的子元素。

    -->
    <div class="box1">
        <div class="box2"></div>
    </div>
    <hr>
    <div class="box3"></div>
    <div class="box4"></div>
    <hr>
    <div class="box5">
        <div class="box6"></div>
    </div>
</body>
</html>

沙丁鱼意大利面

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
6.浮动——高度塌陷（BFC）

box1没有指定宽高，由于其是文档流中的块元素，所以宽度默认是父元素的全部,即的全部，其高度由内部子元素的高度决定,所以box1内部的box2多高，就决定了box1多高。但是我们发现，这里虽然box1的高度可以有box2的高度变化而变化，但是box1,box2都浮动，后续不浮动的box3自动补位上移，也会影响之后不浮动的元素。通过包含块也浮动，可以使得包含块的高度由浮动的子元素的高度决定。开启BFC的方法：（任何开启bfc的方法都有其副作用）
复制链接

扫一扫