BFC相关理解-CSDN博客

本文链接：https://blog.csdn.net/ll_0801xyz/article/details/77323261

BFC(Block Formatting Context—块级格式化上下文)是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域。它的定位体系属于常规文档流。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置；
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

可以生成BFC的元素

float的值不为none（float:left将会把元素置于容器的左边，其他元素环绕着它）
position的值为absolute
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个（display:table可能会产生一些问题）
overflow的值不为visible （overflow:hidden将会剪切掉溢出的元素，overflow:scroll可能会显示不必要的滚动条）
根元素

BFC盒子对齐

在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄）

BFC应用

1、防止外边距折叠

在常规文档流中，盒子都是从包含块的顶部开始一个接着一个垂直堆放。两个兄弟盒子之间的垂直距离是由他们个体的外边距所决定的，但不是他们的两个外边距之和。
外边距折叠：当兄弟元素的外边距不一样时，将以最大的那个外边距为准。
解决方法：毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC，他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距问题</title>
  <style type="text/css">
    .container {
      width: 300px;
      height:500px;
      background-color: red;
      overflow: hidden; /* creates a BFC*/
    }
    p {
      text-align: center;
      width:300px;
      display: table;
      height:100px;
      background-color: lightgreen;
      margin: 30px 0;
    }
    .newBFC {
      overflow: hidden; /* creates new BFC*/
    }
  </style>
</head>
<body>
<div class="container">
  <p>盒子1</p>
  <p>盒子2</p>
  <div class="newBFC">
    <p>盒子3</p>
  </div>
</body>
</html>

当第二和第三个兄弟元素属于不同的BFC时，在他们之间将不会有任何外边距折叠著作权归作者所有。
页面效果
这里写图片描述

2、清除浮动

给父元素添加overflow:hidden,生成一个BFC

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动</title>
  <style type="text/css">
    .container {
      background-color: red;
      width:300px;
      height: 200px;
      overflow: hidden; /* create a BFC */
    }
    .container div {
      width:100px;
      height: 100px;
      text-align: center;
      float: left;
      background-color: indianred;
      margin: 20px;
    }
  </style>
</head>
<body>
<div class="container">
  <div>盒子1</div>
  <div>盒子2</div>
</div>
</body>
</html>

页面效果
这里写图片描述

3、自适应两栏布局（防止文字环绕）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两栏布局</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #image{
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    #main{
      width: 300px;
      overflow: hidden;  /*create a BFC*/
      background-color: indianred;
    }
  </style>
</head>
<body>
  <div id="image"></div>
  <div id="main">
    《卖炭翁》是唐代诗人白居易创作的《新乐府》组诗中的一篇。
    此诗以个别事例来表现普遍状况，描写了一个烧木炭的老人谋生的困苦，
    通过卖炭翁的遭遇，深刻地揭露了“宫市”的腐败本质，
    对统治者掠夺人民的罪行给予了有力的鞭挞与抨击，
    讽刺了当时腐败的社会现实，表达了作者对下层劳动人民的深切同情，
    有很强的社会典型意义。全诗描写具体生动，历历如绘，结尾戛然而止，含蓄有力，
    在事物细节的选择上和人物心理的刻画上有独到之处
  </div>
</body>
</html>

页面效果

这里写图片描述

4、实现三栏布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局</title>
  <style type="text/css">
    *{
      text-align: center;
    }
    .left{
      margin-right: 20px;
      float: left;
      height: 200px;
      width: 100px;
      background-color: red;
    }
    .right{
      margin-left: 20px;
      width: 200px;
      height: 200px;
      background-color: blue;
      float: right;
    }
    .main{
      height: 200px;
      overflow: hidden;  /*create a BFC*/
      background-color: rosybrown;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">main</div>
</div>
</body>
</html>

页面效果
这里写图片描述