日记详情

CSS auto、float 与父级高度塌陷

一、float 浮动

1. 作用与取值

• float ：让元素脱离标准文档流，向左/向右浮动排列
• 常用值：
• float: left ：左浮动
• float: right ：右浮动
• float: none ：默认，不浮动

2. 浮动特性

3. 元素脱离普通流，不再占据原有文档流空间

4. 多个浮动元素会紧贴并排，空间不足自动换行

5. 行内元素浮动后，会具备块级特性（可设置宽高）

6. 核心问题：父元素高度塌陷（父盒子没有设置高度时，高度变为 0）

7. 二、父级高度塌陷（重点）

   1. 塌陷原因

   父元素未设置固定高度，内部子元素全部浮动、脱离文档流，父级无法感知子元素高度，高度变为 0。

   2. 4 种经典清除浮动方案（解决塌陷）

   方案1：父级设置固定高度

   css

.father {height: 200px; /* 写死高度，不灵活，不推荐 */
}

缺点：内容高度变化时需手动改值，不适用自适应布局。

方案2：额外空标签 + clear: both

在所有浮动子元素最后加空标签：

<div class="father"><div class="son"></div><div class="son"></div><div class="clear"></div> <!-- 空标签 -->
</div>
 css.clear {clear: both; /* 清除左右浮动影响 */
}