BFC - 块级格式上下文

1. 什么是BFC？

　　浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为visible的块级盒子，都会为他们的内容创建新的BFC

2. 触发条件？

　　根元素

　　浮动元素

　　绝对定位元素

　　行内元素

　　表格单元格

 　　overflow值不为visible的快元素

3.应用场景 / 可以解决哪些问题？

  • 防止浮动导致父元素高度塌陷

　　<head>

　　　　<style>

　　　　　　.container { border: 10px solid red; }

　　　　　　.inner { background: #08BDEB; height: 100px; width: 100px; }

　　　　</style>

　　</head>

　　<body>

　　　　<div class="container">

　　　　　　<div class="inner"></div>

　　　　</div>

　　</body>

接下来将inner元素设为浮动，会产生父元素塌陷: 
  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }
对父元素设置BFC，即可解决：
.container { 
　　border: 10px solid red; 
　　overflow: hidden; 
}
  • 避免外边距折叠

两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了

<style>
    .container {
      background-color: green;
      overflow: hidden;
    }

    .inner {
      background-color: lightblue;
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>
</html>

此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。 现在我们做如下操作:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>
复制代码

style增加:

.bfc{
    overflow: hidden;
}


posted @ 2023-02-02 16:22  felix的小黑屋  阅读(28)  评论(0)    收藏  举报