BFC的特性

最新推荐文章于 2024-02-05 16:43:26 发布

After_wade

最新推荐文章于 2024-02-05 16:43:26 发布

阅读量279

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43423291/article/details/109843822

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BFC（块级格式上下文）

• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
• 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
• BFC不会重叠浮动元素
• BFC可以包含（清除）浮动
1.BFC会阻止垂直外边距（margin-top、margin-bottom）折叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
           width: 100px;
           height: 100px;
           background-color: aqua;
           margin: 20px;
       }
       #two{
           width: 100px;
           height: 100px;
           background-color: green;
           margin: 20px;
       }
    </style>
</head>
<body>
    <div id="one">1</div>
    <div id="two">2</div>
</body>
</html>

在这里插入图片描述
此时两个div同属一个BFC，所以反生了margin的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
           width: 100px;
           height: 100px;
           background-color: aqua;
       }
       #two{
        background-color: pink;
       }
       #two h1{
           margin: 20px;
           background-color: yellow;
       }
    </style>
</head>
<body>
    <div id="one">1</div>
    <div id="two">
        <h1>2</h1>
    </div>
</body>
</html>

在这里插入图片描述
此时第二个div没有设置外边距，但是他和子元素的外边距合并了，解决的办法就是把父元素#two设为新的BFC这样子元素的margin就不会和父元素的margin发生重叠。

形成bfc的方式：

• overflow: hidden/auto/sroll;
• float: left/right/both;
• display: inline-block/table-cell/flex/table-caption/inline-flex;
• position:absolute;
每种方式都有不一样的副作用,相对来说overflow: hidden副作用最小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
           width: 100px;
           height: 100px;
           background-color: aqua;
       }
       #two{
        background-color: pink;
        overflow: hidden;
        /* float: left; */
        /* display: inline-block; */
       }
       #two h1{
           margin: 20px;
           background-color: yellow;
       }
    </style>
</head>
<body>
    <div id="one">1</div>
    <div id="two">
        <h1>2</h1>
    </div>
</body>
</html>

在这里插入图片描述

2.BFC不会重叠浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ct {
            border: 1px solid;
            width: 200px;
        }
        .aside {
            width: 50px;
            height: 50px;
            background-color: tomato;
            float: left;
        }
        .content {
            background-color: yellow;
            /* overflow: hidden; */
        }
    </style>
</head>
<body>
    <div class="ct">
        <div class="aside"></div>
        <div class="content">
这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠BFC不会重叠浮动元素
        </div>
    </div>
</body>
</html>

aside脱离了文档流，所以content和aside的重叠了
在这里插入图片描述
给content设置overflow: hidden，形成BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ct {
            border: 1px solid;
            width: 200px;
        }
        .aside {
            width: 50px;
            height: 50px;
            background-color: tomato;
            float: left;
        }
        .content {
            background-color: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="ct">
        <div class="aside"></div>
        <div class="content">
这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠BFC不会重叠浮动元素
        </div>
    </div>
</body>
</html>

在这里插入图片描述
这样aside和content就不重叠了，形成了两栏布局。

3.BFC可以包含（清除）浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ct {
            background: blue;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid;
            float: left;
        }
    </style>
</head>
<body>
    <div class="ct">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

刚开始两个box没有显示蓝色，因为父元素的高度为0，给父元素创建BFC，BFC可以包裹浮动元素
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ct {
            background: blue;
            float: left;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid;
            float: left;
        }
    </style>
</head>
<body>
    <div class="ct">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

在这里插入图片描述
清除浮动的局限性：
使用BFC使用float的时候会使父容器长度缩短，而且还有个重要缺陷——父容器float解决了其塌陷问题，那么父容器的父容器怎么办？overflow属性会影响滚动条和绝对定位的元素；position会改变元素的定位方式，这是我们不希望的，display这几种方式依然没有解决低版本IE问题。。。

After_wade

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的特性

BFC（块级格式上下文）• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠• 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。• 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。
复制链接

扫一扫