CSS Base

BFC

BFC(Block Formatting Context)是CSS中的一个概念,用于描述块级元素的布局环境。BFC是一个独立的渲染区域,其中的元素按照一定的规则进行布局。

触发条件

.bfc {
/* 以下任意一个条件都能触发 BFC */
overflow: hidden/auto/scroll; /* 常用方式 */
display: flow-root; /* 推荐方式,专门用于创建 BFC tailwind 中使用 .flow-root 会自动创建 BFC */
display: inline-block/flex/grid;
position: absolute/fixed;
float: left/right;
}

防止外边距重叠

外边距重叠是指两个相邻的块级元素的上下外边距会合并成一个外边距,这个外边距的值是两个元素外边距值中的较大者。

CodeSandPack is loading . . .

清除浮动(包含浮动)

CodeSandPack is loading . . .

自适应两栏布局

CodeSandPack is loading . . .

清除浮动标准写法

.clearfix::after {
content: '';
display: block;
clear: both;
}

Grid 布局

Flex 布局