bfc的特性及原理

最新推荐文章于 2022-03-15 08:59:43 发布

考拉king

最新推荐文章于 2022-03-15 08:59:43 发布

阅读量493

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/koala40/article/details/106746335

版权

什么是BFC

BFC（Block Formatting Context）会计格式上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。即BFC是一个独立的布局环境，内部的元素无论怎么操作都不会影响到外部。

BFC产生条件

1.overflow不为visible
2.浮动
3.position为absolute或者fixed
4.display为inline-block、table-cell、table-caption、table-flex

BFC的作用

1.内部的box会在垂直方向一个接一个放置
2.box垂直方向的距离由margin决定，同一个BFC相邻两个的margin会重叠
3.每个box的margin-left会触碰到容器的border-left，即使浮动也是这样
4.不会发生margin穿透
5.形成BFC的趋于不会与float box重叠（可以阻止浮动元素造成的环绕现象）
6.计算BFC高度时浮动元素也参与计算（BFC确切包含浮动的子元素）
7.原本浮动元素应该脱离文档流，但在BFC会计算其高度

BFC应用

1.实现自适应两栏布局
2.解决父元素高度塌陷
3.解决垂直方向兄弟元素的margin的重叠

两栏布局代码

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 600px;
            margin: 0 auto;
        }
        .left{
            background-color: aqua;
            width: 100px;
            height: 150px;
            float: left;
        }
        .right{
            height: 200px;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

解决父元素塌陷问题代码

<style type="text/css">
        .wrap{
            width: 400px;
            border: 1px solid black;
            background-color: blanchedalmond;
            overflow: hidden;
            /* 使父元素编程BFC，解决高度塌陷*/
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        contain
        <div class="son"></div>
    </div>
</body>
</html>

解决垂直向上兄弟元素margin重叠

<style>
    p {
        width: 200px;
        height: 100px;
        background-color: #fcc;
        margin: 25px;
    }
    .wrap {
        /*p外面包裹一层，并按如下设置，形成一个单独的BFC*/
        overflow: hidden;
    }
</style>

<body>
    <div class="wrap">
        <p class="a">a</p>
    </div>
        <p class="b">b</p>
</body>

触发BFC属性的方法（比较好用的）

1.overflow：auto/hidden
2.display：inline-block
3.display：table-cell

注：使用float时最好在在父元素上添加.clearfix

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: ''; 
    display: table; 
    clear: both;
}

考拉king

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bfc的特性及原理

什么是BFCBFC（Block Formatting Context）会计格式上下文，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。即BFC是一个独立的布局环境，内部的元素无论怎么操作都不会影响到外部。BFC产生条件1.overflow不为visible2.浮动3.position为absolute或者fixed4.display为inline-block、table-cell、table-caption、table-flexBFC的作用1.内部的box会在垂直方向一个
复制链接

扫一扫