使用BFC解决父元素塌陷

梵高先生的天空

已于 2022-10-28 17:51:39 修改

阅读量99

点赞数

文章标签： css html javascript

于 2022-10-25 14:19:54 首次发布

本文链接：https://blog.csdn.net/Kevinlonely/article/details/127512535

版权

使用BFC解决塌陷：

高度塌陷：

- 在子父元素中，子元素设置浮动后，父元素的高度不能被子元素撑开，出现高度塌陷

使用特性：

- 开启BFC的父元素可以包含浮动元素

如何开启

- overflow: hidden; 副作用小

<style>

        /*
            使用BFC解决塌陷：
              使用特性：
                   - 开启BFC的父元素可以包含浮动元素
              如何开启
                  - overflow: hidden; 副作用小
        */
        .outer {
            border: 1px solid red;
            /* float: left; */
            /* position:absolute; */
            /* overflow: scroll; */
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: #bfc;

            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>