BFC个人理解_什么情况下用开启bfc的方法一定能开启bfc,什么情况下又不一定能开启bfc-CSDN博客

本文链接：https://blog.csdn.net/YL971129/article/details/114770499

认识BFC：

BFC全称是block fromatting context，中文是“块级格式化上下文”，拥有BFC特性的元素内部子元素的一定不会在布局上影响外部元素，可以理解为BFC为该元素创建了一个封闭空间，元素内外部是互不影响的。
因此：BFC元素一定不会发生margin重叠，因为margin重叠会影响外面的元素
开启BFC也可以用来清浮动，因为子元素浮动会是父元素高度塌陷，势必会影响后面的布局和定位，因为这样才符合BFC的内部子元素不会影响外部元素的设定

怎样触发BFC：

html根元素
float的值不为none
overflow的值为auto、scroll或hidden
display的值为table-cell、table-caption、inline-block中的任何一个
position的值不为relative和static

BFC可以做什么

一、实现两栏自适应布局

<style>
        *{
            padding:0;
            margin:0;
        }
        .box {
            width: 300px;
            background-color: #bfa;
        }
        img{
            width:60px;
            height:60px;
            float:left;
            background:purple;
        }
        p{
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt=""></img>
        <p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
    </div>

</body>

先看下表现：
在这里插入图片描述
因为给img标签设置了float:left, 导致P标签的内容表现为环绕图片

我们通过上面的介绍了解到，具有BFC特性元素的子元素不会受外部元素影响。同样不会影响外部元素。尝试给P标签添加BFC特性看下效果：

<style>
        *{
            padding:0;
            margin:0;
        }
        .box {
            width: 300px;
            background-color: #bfa;
            margin:20px;
        }
        img{
            width:60px;
            height:60px;
            float:left;
            background:purple;
        }
        p{
            overflow:hidden;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt=""></img>
        <p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
    </div>

</body>

在这里插入图片描述
发现P标签顺着浮动元素边缘形成了自己的封闭上下文。
也就是说，普通元素在添加了overflow:hidden属性后，会自动填满容器中除了浮动元素之外的剩余空间，从而形成自适应布局，上面代码中无论浮动元素img变大或变小，p标签总是会自适应的发生变化以填满容器的剩余空间
修改img宽度为100：

<style>
        *{
            padding:0;
            margin:0;
        }
        .box {
            width: 300px;
            background-color: #bfa;
            margin:20px;
        }
        img{
            width:100px;
            height:60px;
            float:left;
            background:purple;
        }
        p{
            overflow:hidden;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt=""></img>
        <p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
    </div>

</body>

在这里插入图片描述
但是，我们发现此时img标签和p标签之间是没有任何间距的，如果想要设置间距，我们可以：

设置左侧浮动元素

margin-right
透明的border-right
透明的padding-right

设置右侧BFC元素

透明border-left
透明padding-left
如果设置margin-left,则值需要是float:left元素宽度 + 间隔值

比如说：想要设置20px间隔，可以这样操作：

img{margin-right:20px;}
img{border-right:20px solid transparent;}
img{padding-right:20px;}
p{border-left:20px solid transparent;}
p{padding-left:20px}

通常给左侧浮动元素设置margin-right更加方便直观

<style>
        *{
            padding:0;
            margin:0;
        }
        .box {
            width: 300px;
            background-color: #bfa;
            margin:20px;
        }
        img{
            width:100px;
            height:60px;
            float:left;
            background:purple;
            margin-right:20px;
        }
        p{
            overflow:hidden;
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="" alt=""></img>
        <p>我是要成为海贼王的男人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人</p>
    </div>

</body>

在这里插入图片描述

二、解决高度塌陷问题

父子元素外边距塌陷：

外边距塌陷计算规则：

同为正值，去较大的值
同为负值，取绝对值大的值
一正一负，取两值相加后的结果

看代码分析一下：

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:300px;
            background:#bfa;
            margin:0 auto;  //看这里
        }
        .box1{
            width:100px;
            height:100px;
            background:purple;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>

</body>

在这里插入图片描述

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:300px;
            background:#bfa;
            margin:100px auto;   //看这里
        }
        .box1{
            width:100px;
            height:100px;
            background:purple;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>

</body>

在这里插入图片描述
为父元素开启BFC后：

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:300px;
            background:#bfa;
            margin:0 auto;
            overflow:hidden;
        }
        .box1{
            width:100px;
            height:100px;
            background:purple;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>

</body>

在这里插入图片描述

兄弟元素外边距塌陷：

同样遵循上面的规则：

<style>
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width:300px;
            height:300px;
            background:#bfa;
            margin-bottom:30px;
        }
        .box2{
            width:300px;
            height:300px;
            background:purple;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在这里插入图片描述
会发现，box1和box2之间的间距是30px,解决方法是在其中某一个盒子外再套一个div，给外层div开启BFC，从而使其内部子元素不影响外部布局

<style>
        *{
            margin:0;
            padding:0;
        }
        .wrap{
            overflow:hidden;
        }
        .box1{
            width:300px;
            height:300px;
            background:#bfa;
            margin-bottom:30px;
        }
        .box2{
            width:300px;
            height:300px;
            background:purple;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
       <div class="box1"></div> 
    </div>
    
    <div class="box2"></div>
</body>