弄懂 BFC 奖励一顿 KFC

CSS

前端

发布日期: 2022-03-14

更新日期: 2022-03-17

文章字数: 768

前言

对于 BFC 的概念和应用场景一直很模糊，趁着疫情在家有闲着重了解一下，做个总结。

BFC 是什么

BFC 全称：Block Formatting Context，名为『块级格式化上下文』

BFC 触发条件

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块 inline block 元素
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）

BFC 的约束规则

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

解决了什么问题

清除浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .aside {
      float: left;
      width:100px;
      height: 150px;
      background:lightpink;
    }
    .container{
      width:150px;
      height:220px;
      background:mediumturquoise;
    }
    .outer_box1, .outer_box2{
      margin: 20px;
    }
    .outer_box2 .container {
      overflow: hidden;
    }
  </style>
</head>

<body>
     <div class="outer_box1">
        <div class="aside">HaHa</div>
        <div class="container">HeHe</div>
    </div>
    <div class="outer_box2">
        <div class="aside">HaHa</div>
        <div class="container">HeHe</div>
    </div>
</body>

</html>

防止 margin 合并

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      p {
          color: #f55;
          background: #fcc;
          width: 200px;
          line-height: 100px;
          text-align:center;
          margin: 20px;
          border: 1px solid #000;
      }
    .wrap {
      display: flow-root
    }
  </style>
</head>
<body>
  <div>
    两个相邻Box垂直方向margin重叠
    <p>Haha</p>
    <p>Hehe</p>
  </div>
  <div>
    在p外面包裹一层容器，并触发该容器生成一个新BFC
    <p>Haha</p>
    <div class="wrap">
      <p>Hehe</p>
    </div>
  </div>
</body>
</html>

解决高度塌陷

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box{
      float:left;
      width:100px;
      height:100px;
      background:rosybrown;
      color:#fff;
      margin: 60px;
    }
  .outer_box1, .outer_box2{
    background:lightblue;
  }
  .outer_box2{
    display:inline-block;
  }
  </style>
</head>


<body>
    <div class="outer_box1">
        <div class="box">HaHa</div>
        <div class="box">HeHe</div>
    </div>
    <div class="outer_box2">
        <div class="box">HaHa</div>
        <div class="box">HeHe</div>
    </div>
</body>
</html>