CSS-概述

BFC

块级格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。body、根元素 html 都符合 BFC

特性：

• 在页面上是一个独立的容器,外面的元素和里面的元素互不影响
• BFC 元素不会和浮动的元素重叠
• 计算 BFC 元素的高度时,里面浮动元素的高度也会参与计算

触发 BFC 特性的条件：

• float：除 none 以外的值
• position：(absolute、fixed)
• display： inline-block、table-cells、flex
• overflow：除了 visible 以外的值 (hidden、auto、scroll)

常用：display: inline-block 或 overflow:hidden。但是 overflow: visible 这一个条件并不适用于 body 元素，具体原因可参考这个问题下的采纳回答：重提 CSS 中外边距折叠问题

应用：

• 父子 margin 塌陷和 margin 垂直合并
• 清除内部浮动
• 实现两栏适应布局

定位

position

• static。默认，元素会在普通文档流上
• relative。相对自身位置定位
• absolute。以最近的非 static 父级元素作为参考进行定位。元素会脱离普通文档流