BFC块级格式化上下文

最新推荐文章于 2023-10-22 20:47:47 发布

二九君

最新推荐文章于 2023-10-22 20:47:47 发布

阅读量94

点赞数

分类专栏：前端面试题 CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44019523/article/details/114237882

版权

前端同时被 3 个专栏收录

87 篇文章 3 订阅

订阅专栏

面试题

51 篇文章 1 订阅

订阅专栏

CSS

13 篇文章 1 订阅

订阅专栏

BFC规定了内部的Block Box如何布局

BFC的布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

如何创建BFC：

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

BFC的作用：

1.利用BFC避免margin重叠。

2.自适应两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 300px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 300px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>

我们让right单独成为一个BFC，right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。
在这里插入图片描述
3.清除浮动。

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

在这里插入图片描述
当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。

参考：https://blog.csdn.net/sinat_36422236/article/details/88763187

二九君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC块级格式化上下文

BFC规定了内部的Block Box如何布局BFC的布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如
复制链接

扫一扫

专栏目录