BFC布局

最新推荐文章于 2024-02-09 11:34:15 发布

今天会下雨吗

最新推荐文章于 2024-02-09 11:34:15 发布

阅读量218

点赞数

分类专栏：面试 CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45663697/article/details/120608328

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

面试

13 篇文章 0 订阅

订阅专栏

1. 概念

BFC 即 Block Formatting Contexts (块级格式化上下文)
BFC其实就是一个独立的渲染区域（容器），规定了区域内部元素的布局方式，并且区域内元素的布局不会影响到外面的元素。

2. 触发BFC的条件

body根元素
浮动元素：float除了none以外的值
绝对定位元素：position(absolute、fixed)
display为inline-block、table-cells、flex
overflow除了visible以外的值(hidden、auto、scroll)

3. 使用场景

3.1 清除浮动

浮动的元素会脱离文档流，影响后面元素的布局

将元素放在BFC容器里，那么容器将会包裹着浮动元素。

没有添加浮动时
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cR9ua94-1633353492276)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210930204832175.png)]$
添加浮动后
- 紫色方块添加float:left;后造成高度塌陷，导致粉色方块上移并且被紫色盒子挡住
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKQQuEqb-1633353492282)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210930204906483.png)]$
触发容器的BFC
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0MtlD9C6-1633353492288)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20210930205420373.png)]$

<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: indigo;
        float: left;
    }
    .box2{
        width: 150px;
        height: 100px;
        background-color: pink;
        overflow:hidden;
    }
</style>
</head>
<body>
    <div class="main">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

3.2 解决margin重叠

在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加。
- 毗邻说明了他们的位置关系，没有被padding、border、clear和line box分隔开。
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usTpEuIm-1633353492303)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20211004210249735.png)]$

将上面那个盒子分别放入一个BFC容器中
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J05VIykq-1633353492306)(C:\Users\xmydd\AppData\Roaming\Typora\typora-user-images\image-20211004210347640.png)]$

<style>
    #main{display: flex;}
</style>
<body>
  <div id="main">
    <div class="box1"></div>
  </div>
  <div id="main">
    <div class="box2"></div>
  </div>
</body>

今天会下雨吗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
BFC布局

1. 概念BFC 即 Block Formatting Contexts (块级格式化上下文)BFC其实就是一个独立的渲染区域（容器），规定了区域内部元素的布局方式，并且区域内元素的布局不会影响到外面的元素。2. 触发BFC的条件body根元素浮动元素：float除了none以外的值绝对定位元素：position(absolute、fixed)display为inline-block、table-cells、flexoverflow除了visible以外的值(hidden、auto、s
复制链接

扫一扫