领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

你知道什么是BFC么 你知道什么是bfc么英语

nixiaole 2024-11-12 13:44:02 知识剖析 25 ℃

1.什么是BFC？

BFC为块级格式化上下文 属于普通流，是一块独立的渲染区域，BFC的特性容器里面的元素不会影响外边元素布局，当然外部的元素也不能影响内部元素的布局。


2.触发条件？

1.根元素，既HTML元素（当前文档中 html 标签就是一个BFC）。

2.浮动元素：float值为left 、right。

3.overflow不为visable，为auto scroll hidden。

4.绝对定位元素position：absolute、fixed。

5.行内块元素display 的值为inline-block、table、flex、inline-flex、grid、inline-grid。


3.可以解决的应用场景？

1.垂直外边距重叠问题,解决外边距塌陷的问题（盒子垂直方向的距离由 margin 决定。属于同一个BFC的两个相邻盒子的 margin 会发生重叠）：

1) :父子元素的外边距塌陷问题：

<style>
      .boxs {
        width: 300px;
        /* overflow: hidden; */ 解决办法
        background-color: red;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-right:20px;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="boxs">
        <div class="box1"></div>
    </div>
  </body>

2）解决第二种兄弟元素之间外边距塌陷：

两个兄弟上下元素设置margin:20px;按照我们想的应该两个元素相距40px才对是吧，但实际上两个元素相距20px。

问题分析：默认情况下，两个相邻的box的margin会发生重叠的原因，是因为box1和box2都属于html，而html是BFC。因为BFC里面规定了，属于同一个BFC的两个相邻box的margin会发生重叠，所以box1和box2重叠了，也就是外边距重叠。

解决方案：重叠之后，想要不重叠，可以给后面的元素添加一个父元素并且添加声明overflow: hidden; 来解决（添加其他声明也可以，只要可以触发BFC即可）。

可以解决的原因是因为，当给box2添加了父元素并且添加了overflow:hidden;之后，这个父元素boxs就是BFC了，当前的结构里面box1属于BFC html，box2属于BFC boxs，这个时候box1和box2就不属于同一个BFC了，那么也就不会发生重叠了。

2.去除浮动：

问题：li标签浮动，ul高度会塌陷，给ul添加overflow:hidden后，就可以继续包裹li标签，为什么？

问题分析：为什么ul添加了 overflow:hidden;就可以解决高度塌陷，是因为添加了之后，就触发ul为BFC，而BFC里面规定了，计算BFC高度的时候，浮动元素也参与计算。

ul未触发BFC时，li浮动时，ul高度塌陷。


3.自适应两栏布局。

box1浮动，box2会到box1下面，发生了重叠，可以在box2添加overflow:hidden;触发BFC，可以实现右边盒子自适应。

<style>
        body{
            margin:0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .boxs {
            width:100%;
            background-color: red;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .box2 {
            /* overflow:hidden;触发BFC */
            height: 300px;
            background-color: yellow;
        }
    </style>

  <body>
    <div class="boxs">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
  </body>

Tags：

猜你喜欢

最近发表
标签列表