文档流code案例小汇【处理高度塌陷】

clear mdn文档 clear只是清除浮动，不能缓解【高度塌陷】

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

值

• none
  元素不会被向下移动以清除浮动。

• left
  元素被向下移动以清除左浮动。

• right
  元素被向下移动以清除右浮动。

• both
  元素被向下移动以清除左右浮动。

• inline-start
  元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。

• inline-end
  元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。

none

left

right

both

解决塌陷

float: none;

inline-block;

table-cell

flex

position: absolute;

position: fixed;

display: table-caption