BFC——块格式化上下文

最新推荐文章于 2024-04-17 00:24:27 发布

前端碎碎念

最新推荐文章于 2024-04-17 00:24:27 发布

阅读量145

点赞数

分类专栏：面试文章标签： BFC

本文链接：https://blog.csdn.net/zhongqw_00/article/details/99679262

版权

面试专栏收录该内容

111 篇文章 1 订阅

订阅专栏

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

如何触发一个BFC呢？

body根元素
overflow为hidden, scroll
display为inline-block, flex, grid, table-cell, flex, inline-flex…
position为absolute, fixed
float不为none

BFC规则

内部的box会在垂直方向一个接一个的放
同一个BFC下的相邻两个margin重叠
内部的子元素不会影响到外部元素，也不会被影响
计算BFC高度时，浮动元素也参与计算
BFC区域不会和外部的浮动元素重叠

主要应用？

margin重叠

<style>
        .container{
            width: 200px;
            height: 200px;
            overflow: hidden;
            padding: 30px;
            background:#5f9ea0;
        }
        .child:nth-child(1){
            width: 50px;
            height: 50px;
            margin-bottom: 30px;
            background: red;
        }
        .child:nth-child(2){
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background: palegreen;
        }
    </style>
<body>
<div class="container">
    <div class="child"></div>
    <div class="child"></div>
</div>
</body>

在这里插入图片描述
表现为：此时内部两个div是在一个BFC下放置，div1的margin-bottom是30px，div2的maigin-top为50px，按道理来说应该是30+50=80px，但实际只有50px，这就是margin重叠，会选择较大的margin作为两个元素的间隔。
解决办法：将两个div分别放入两个BFC
2. 浮动元素高度塌陷，清除浮动

 <style>
        .container{
            width: 200px;
            border: 2px #5f9ea0 solid;
        }
        .child{
            float: left;
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>
<body>
<div class="container">
    <div class="child">div1</div>
</div>
</body>

在这里插入图片描述
表现为：父元素未设置高度，子元素高度为50px，但子元素高度并未撑开父元素。
解决办法：放入一个BFC下
实现：将上述代码改为

 .container{
            width: 200px;
            border: 2px #5f9ea0 solid;
			overflow: hidden;
  }

在这里插入图片描述
3. BFC 可以阻止元素被浮动元素覆盖

<style>
        .left {
            width: 100px;
            height: 100px;
            float: left;
            background: #f66;
        }
        .right{
            height: 200px;
            background: #fcc;
            width: 500px;
        }
    </style>
</head>
<body>
<div class="left">我是浮动元素</div>
<div class="right"></div>

在这里插入图片描述
表现：红色div是浮动元素，所以不占据位置，粉色div会上移覆盖位置。
解决方法：将粉色div放置一个BFC，则BFC不会与浮动元素重叠

.right{
            height: 200px;
            overflow: hidden;
            background: #fcc;
            width: 500px;
 }

在这里插入图片描述
4. 自适应两列布局，左边宽度固定，右边自适应

    <style>
        .left {
            width: 100px;
            height: auto;
            float: left;
            background: #f66;
        }
        .right{
            height: 200px;
            overflow: hidden;
            background: #fcc;
            width: auto;
        }
    </style>
</head>
<body>
<img class="left" src="https://avatar.csdn.net/7/8/F/3_zhongqw_00.jpg">
<p class="right">我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的我是自适应的</p>

在这里插入图片描述

前端碎碎念

关注

0
点赞
踩
2

收藏

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

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。如何触发一个BFC呢？body根元素overflow不为visibledisplay为inline-block, table-cell, flex, inline-flexposition不为absolute, fixedfloat不为no...
复制链接

扫一扫