css-5分钟看懂BFC以及实际应用

最新推荐文章于 2022-11-28 12:18:39 发布

不要跟我说对不起

最新推荐文章于 2022-11-28 12:18:39 发布

阅读量125

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u012365780/article/details/114637764

版权

css 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

文章目录

- - - - 一、BFC
      - 1. 现象
        2. 怎么形成BFC
        3. BFC的其他作用

一、BFC

BFC[Box Formatting Context,块级格式化上下文]是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，容器外面的元素也不会影响到容器里面的元素。

1. 现象

一个盒子不设置高度，当里面的子元素浮动的时候，无法撑起自身

    <style>
        .box {
            width: 600px;
            border: 1px solid #000;
            background-color: orange;
        }

        .c1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .c2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>

<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>

未设置浮动前：

c1、c2设置浮动之后：

.c1 {
  width: 200px;
  height: 200px;
  background-color: blue;
  float: left;
}

可以清楚的看到，外面的盒子高度没了。

原因其实也很简单，就是包裹c1,c2子元素的父元素没有形成BFC

2. 怎么形成BFC

方法一：float的值不是none
- 缺点：盒子不能平白无故的浮动
方法二：position的值不是static或者relative
- 推荐使用
方法三：display的值是inline-block，flex，table-cells或者是inline-flex
- 缺点：不够友好，盒子本来就是块级元素，变成inline-block，行内块
方法四：overflow除了visible以外的值（hidden、auto、scroll）
- 推荐使用

例如：上面的案例在父元素上加上overflow:hidden

.box {
  width: 600px;
  border: 1px solid #000;
  background-color: orange;
  overflow: hidden;
}

3. BFC的其他作用

BFC可以取消盒子margin塌陷问题

现象

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 20px;
        }
    </style>

<body>
    <p></p>
    <p></p>
</body>

两个p标签的margin的值为20px，上下加起来应该是40px才对，而真实情况却只有20px，原因就是margin塌陷问题

使用BFC解决

# 1. 使用块级标签将p标签包裹起来
# 2. 块级标签具备BFC

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 20px;
        }

        div {
            overflow: hidden;
        }
    </style>

<body>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
</body>

BFC可以阻止元素被浮动元素覆盖【不规范写法】

现象

    <style>
        .c1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            float: left;
        }

        .c2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>

<body>
        <div class="c1"></div>
        <div class="c2"></div>
</body>

可以看到c2被c1覆盖

处理

# 1. 将c2变成具备BFC特性
.c2 {
  width: 200px;
  height: 200px;
  background-color: blue;
  overflow: hidden;
}

不要跟我说对不起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css-5分钟看懂BFC以及实际应用

文章目录一、BFC1. 现象2. 怎么形成BFC3. BFC的其他作用一、BFCBFC[Box Formatting Context,块级格式化上下文]是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，容器外面的元素也不会影响到容器里面的元素。1. 现象一个盒子不设置高度，当里面的子元素浮动的时候，无法撑起自身 <style> .box { width: 600px; border: 1px
复制链接

扫一扫