BFC(Block formatting context)

(1)概念:

直译为 块级格式化上下文 ,把BFC理解成一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.
    · 我理解为:将BFC看成是一种属性,当拥有该属性的元素就相当于一块独立的区域。

(2)实现BFC属性的方法:

      1. 浮动元素,float 除 none 以外的值
    2. 定位元素,position的值不是static或者relative。
    3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、
        table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
    4. overflow 除了 visible 以外的值(hidden,auto,scroll)
    5. 根元素<html> 就是一个 BFC

(3)BFC的作用

    1、避免外边距重叠(防止margin塌陷)

        margin塌陷的意思:同时给两个div设置相同的属性,当设置margin为100px,那么两个div之间的间隙应该是margin-bottom+margin-top=200px的外边距,但是没有设置BFC属性,块的上外边距和下外边距会合并为单个边距,取最大值,如果margin相等,则仅为一个,这就是外边距重叠(margin塌陷)。
        · 没有设置BFC时两个div之间的外边距
        · 通过给其中一个div包裹一个父div,设置BFC属性,来解决margin塌陷的问题
        · 代码:
<style>
      /* 通过设置overflow:hidden属性,将父容器设置为BFC属性 */
      .container {
        overflow: hidden;
      }
      .cube {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 外边距重叠 -->
    <div class="container">
      <div class="cube"></div>
    </div>
    <div class="cube"></div>
  </body>
        · 运行结果:

    2、用于清除浮动

        · 当给一个父元素设置边框,内部元素会将父元素撑起来,但是如果内部元素设置了 float属性,则该父元素会失去支撑,从而没有高度。
        · 设置了浮动属性的子元素,父元素失去支撑
        · 通过给父元素设置BFC属性,来实现清除浮动
        · 代码:
<style>
      /* overflow: hidden;设置该属性,将父元素设置了BFC属性,即实现了清除浮动 */
      .parent {
        border: 10px solid darkorange;
        overflow: hidden;
      }
      .child {
        width: 100px;
        height: 100px;
        background-color: rgb(63, 190, 80);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
        · 运行结果:

    3、阻止元素被浮动元素覆盖

        · 当前一个兄弟元素设置了浮动属性时,后一个兄弟元素会跑到前一个兄弟元素的位置去,从而后一个兄弟元素被覆盖。
        · 第二个兄弟元素被覆盖的情况
        · 通过给被影响的兄弟元素设置BFC属性,来解决被覆盖的情况。
        · 代码:
<style>
      .cube1 {
        width: 100px;
        height: 100px;
        background-color: darkorange;
        float: left;
      }
      /* 通过给被影响元素设置overflow: hidden;属性,将其设置BFC属性,实现阻止被浮动元素影响 */
      .cube2 {
        width: 200px;
        height: 200px;
        background-color: darkgrey;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="cube1"></div>
    <div class="cube2"></div>
  </body>
        · 运行结果:

(4)拓展:CSS中常见的定位方案

        · 普通流定位
            1.元素按照其在HTML中的先后位置至上而下进行布局
            2.行内元素水平排列,直至当行被占满然后换行,块级元素则会被渲染为完整的一整行
            3.所有元素默认都是普通流定位
        · 浮动
            元素首先按照普通流的位置出现,然后根据浮动的方向尽可能向左或向右偏移
        · 绝对定位
            元素整体会脱离普通流,因此绝对定位的元素不会对兄弟元素造成影响
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐