daydayup

Appearance

块级格式化上下文（Block Formatting Context） ​

它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用

简单解析：BFC 创建一个完全独立的布局环境，让空间里子元素不会影响到外面布局

用于定位与清除浮动 ​

  • 包含内部浮动
  • 排除外部浮动
  • 阻止外边距重叠

创建 BFC 的主要方式 ​

  • html 元素（display: flow-root）
  • 定位与布局方式，position：absolute、fixed；float：值不为 none；display：inline-block、table、flex、grid
  • 溢出行为，overflow 值不为 visible 的块元素

扩展 ​

两栏布局，一列固定宽度，一列自适应 ​

  • float + BFC 或 margin-left
  • absolute + margin-left
  • inline-block 设置 width：<percentage>
  • table
  • flex
  • grid

float + BFC 或 margin-left （父元素高度塌陷问题）

absolute + margin-left

inline-block（内联块之间空白符会当作一个字符，可以通过 font-size:0 消除）

table（未设置宽的一列自动填充剩余空间）

flex

grid

代码仓库：https://github.com/dobble11/daydayup-playground/blob/main/two-col-layout/index.html