BFC 触发规则: 解决高度塌陷，外边距重叠，用于左右布局，双飞翼布局

憨憨404

已于 2023-12-14 16:06:12 修改

阅读量777

点赞数

分类专栏： HTML + CSS + CSS3（页面布局）文章标签： css html css3

于 2022-11-21 21:27:20 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/127972689

版权

HTML + CSS + CSS3（页面布局）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

BFC 规则：

前提条件：⼀定是块元素 block

BFC就是⼀个⻚⾯上隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素

BFC的区域不会和浮动的元素重叠(浮动的元素不会覆盖bfc区域的元素)(应⽤：左右布局、双⻜翼布局)

计算BFC⾼度的时候浮动的元素也参与计算（⾼度塌陷问题）

属于同⼀个BFC的2个相邻的盒⼦会发⽣外边距重叠。（外边距重叠：⽗⼦关系兄弟关系）

BFC的触发规则：

1. 根元素html就是⼀个BFC

2. 加了浮动也会触发BFC

3. 定位为绝对和固定的时候

4. overflow:hidden\auto\scroll

eg: overflow: scroll ; 制作一个固定滚动条

5. display为：inline-block、flex、table-cell、table-caption、inline-flex

所以要触发BFC来解决以下问题：

1.⾼度塌陷的问题：父子关系：

eg：子盒子的元素样式 margin-top：150px; 会带动父亲。父亲写了 height: 200px; 也不生效了, 因为子盒子的元素比父盒子大了, 撑大父盒子

overflow:hidden解决

宽度一开始就知道, 布局做好, 也可以解决

添加后

<style>
  .parent {
    border: 1px solid black;
    height: 200;
    /* 添加 overflow: hidden */
    overflow: hidden;
  }

  .child {
    margin: 150px 0;
    height: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

2.用于左右布局、双⻜翼布局

左：

    <style>
        .left{
            width: 200px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .right{
            height: 600px;
            background-color: pink;
            
            overflow: hidden;
        }
    </style>

<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

双：

    <style>
        .left,.right{
            width: 200px;
            height: 500px;
            background-color: red;
        }
        .center{
            height: 600px;
            background-color: pink;
            overflow: hidden;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

3.外边距重叠问题：兄弟关系：

eg: 挨着的俩盒子对盒子都设置了挨着的 margin值，会取一个大的值显示。重叠问题。用overflow：hidden解决

添加后

<style>
  .element1 {
    margin-top: 50px;
    height: 300px;
    background-color: pink;
    /* overflow: hidden; */
    overflow: hidden;
  }
  .element2 {
    margin-top: 50px;
    height: 100px;
    background-color: skyblue;
  }
</style>
<div class="element1">
  <div class="element2">Element 2</div>
</div>