关于“BFC垂直方向边距重叠”问题，没有明白为什么要这样做，在这里怎么样体现了BFC？

来源：3-5 CSS盒模型（二）

大大米

2018-06-14

老师，课程盒模型（二）大概三分半钟，关于“BFC垂直方向边距重叠”问题，

第二个元素加父元素不加overflow：hidden样式效果是一样的并没有重叠问题（第二个元素只加父元素之后并没有兄弟元素边距重叠问题），

没有明白为什么要这样做，在这里怎么样体现了BFC？

写回答

1回答

qq_天空之镜_2

2018-06-16

你可以先了解下什么是BFC，BFC块及格式化上下文，意思就是说防止边距重叠，你可以把代码粘贴一下，看看是什么问题，你在控制台去掉类名为BFC的overflow的属性试试

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <style media="screen">
      .margin {
        background: red;
        overflow: hidden;
      }
      p {
        margin: 5px auto 20px;
        background: blue;
      }
    </style>
    <div class="margin">
      <p>1</p>
      <div class="BFC" style="overflow: hidden">
        <p>2</p>
      </div>

      <p>3</p>
    </div>

  </body>
</html>

前端跳槽面试必备技巧面试官全流程指导

一门让你能成功获取前端 Offer 的课程，不只是技术，面试“技巧”也至关重要

4836 学习 · 830 问题

查看课程

相似问题

为什么说bfc垂直方向边距重叠，bfc不应该是解决垂直方向重叠的方案么

回答 2

BFC问题

回答 1

请问，您上次讲的BFC原理的第一条是：BFC这个元素垂直方向上的边距会发生重叠，但是这节却用BFC处理边距重叠问题，这个是怎么回事，我理解的哪有问题

回答 1

老师，不过我有个疑问

回答 1

BFC的概念还是有一些不理解

回答 2

打开慕课网App查看更多内容