BFC

BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

  • BFC内部的BOX 垂直沿着父元素边框排列
  • Box垂直方向的距离由margin决定。
  • 同一个BFC的两个相邻Box的margin会发生重叠。

触发BFC的条件

  • body根元素
  • 设置浮动，不包括none
  • 设置定位，absoulte或者fixed
  • 行内块显示模式，inline-block
  • 设置overflow，即hidden，auto，scroll
  • 表格单元格，table-cell
  • 弹性布局，flex
  • 一个BFC区域，只包含其所有子元素，不包含子元素的子元素.

BFC 特性

  1. 同一个 BFC 下外边距会发生折叠
  2. BFC 可以包含浮动的元素（清除浮动）
  • 父元素触发BFC 可以包含浮动子元素(高度自适应)
  1. BFC可以阻止标准流元素被浮动元素覆盖
  • 两栏式布局 左: float: left;右 overflow: hidden;(右侧宽度自适应)
利用BFC避免marjin重叠
  • 给一个或两个box设置BFC，形成独立区域
<html>
<header>
    <style>
        .box1 {
            background-color: aqua;
            height: 100px;
            width: 100px;
            float: left;
            /*利用float: left形成BFC*/
            margin: 100px;
        }
        
        .box2 {
            background-color: lime;
            height: 200px;
            margin: 100px;
        }
    </style>
</header>

<div class="box2"></div>
<div class="box1"></div>

</html>
利用BFC解决包含塌陷
posted @ 2022-03-08 11:07  w0000  阅读(25)  评论(0)  编辑  收藏  举报