破坏性 父容器塌陷

包裹的知识。

float特性-包裹与破坏
浮动是魔鬼，无宽度、无图片、无舞动

一、包裹

• 包裹
  

• 坚挺

• 隔绝（BFC，block formatting content，块级格式化上下文）

二、破坏（容器遭到破坏）

包裹的特性：

1、宽度收缩

2、高度伸开

3、内部变化不影响外部

float特性之包裹：

1. 收缩

2. 坚挺

3. 隔绝（块级格式化上下文BFC）

之破坏：容器被破坏

具有破坏行：

display: none

position: absolute /fixed / sticky

具有包裹性：

display: inline-block / table-cell

position: absolute / fixed /sticky

overflow: hidden /scroll

增强浮动的感性认知

• 包裹（ 收缩、坚挺、隔绝 ）

• 破坏

ddddd

fcccc

具有破坏性的属性

具有包裹属性

<- 浮动属性：{横向：收缩,纵向：坚挺；整体：隔绝 }-> <!-包裹-> display:inline-block/table-cell position:absoulute/fixed overflow:hidden/scroll 〈!-破坏:元素高度塌陷，自身位置浮动-> display:none; position：absoulte/fixed

BFC

！

！

<- 浮动属性：{横向：收缩,纵向：坚挺；整体：隔绝 }-> <!-包裹-> display:inline-block/table-cell position:absoulute/fixed overflow:hidden/scroll 〈!-破坏:元素高度塌陷，自身位置浮动-> display:none; position：absoulte/fixed