BFC解决了什么

最新推荐文章于 2024-09-23 16:36:59 发布

Yxmeimei

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量365

点赞数 5

分类专栏： css 文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_63543660/article/details/142345058

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BFC（Block Formatting Context），块级格式化上下文。

如果一个元素具有BFC，则内部子元素怎么变化都不会影响外部元素。

怎么触发BFC呢？

<html>根元素
float值不为none
display：inline-block || table-cell || table-caption
position：absolute || fixed
overflow：auto || scroll || hidden

BFC主要解决了什么？

1. 解决子元素使用float，导致脱离文档流，造成高度塌陷的问题（两栏布局中也存在该问题）

当没使用浮动时，子元素会将父元素的高度撑开

当给子元素添加浮动时，会造成高度塌陷，父元素的高度没有被撑开

那么就可以给父元素设置BFC，使父元素高度被撑开

<head>
    <style>
        .content{
            background: sandybrown;
            display: inline-block;  /*设置BFC*/
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 20px;
            background: khaki;
            float: left;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

2. 解决外边距塌陷（重叠）的问题

当给子元素设置上边距为50px时，子元素不会距离父元素50px，而是父元素距离页面上部分50px，此为外边距塌陷或叫外边距重叠。

解决此问题有三种方法：

给父元素设置BFC
给父元素设置border
给父元素设置padding

<style>
    .content{
        width: 400px;
        height: 200px;
        background: wheat;
        /* float: left; */
        /* border: 1px solid #000; */
        padding: 1px;
    }
    .box{
        width: 200px;
        height: 150px;
        background: gray;
        margin-top: 50px;
    }
</style>