DIV

一、float 三个属性值
float: none
默认值，元素不浮动，保持正常文档流。
float: left
元素向左浮动，脱离标准文档流，紧贴父容器左侧，后面元素环绕它。
float: right
元素向右浮动，脱离标准文档流，紧贴父容器右侧，后面元素环绕它。
重点：float 没有 center（居中浮动），浮动只能左 / 右，不能直接居中。
二、浮动核心特性（必考点）
脱离标准文档流
浮动元素不再占据文档流空间，父盒子高度会塌陷。
文字环绕效果
普通文字、行内元素会自动绕开浮动盒子。
浮动元素自动转为行内块
浮动后元素可直接设置宽高，不用 display:inline-block。
同方向浮动会并排排列
多个 float:left 盒子从左到右依次紧贴；空间不足自动换行。
三、浮动带来的问题：高度塌陷
父盒子没有设置固定高度时，内部全部子元素浮动 → 父盒子高度变为 0，布局错乱。
四、清除浮动 4 种常用方法
1. 额外标签法（最简单）
在所有浮动子元素末尾加空 div，设置 clear:both

CSS

.clear { clear: both; }

HTML

<div class="clear"></div>

2. 父容器 overflow 方案（推荐简易）
给父盒子加 overflow:hidden / auto，触发 BFC，自动包裹浮动子元素

CSS

.father { overflow: hidden; }

3. 伪元素清除浮动（企业常用，无多余标签）

父盒子直接加 class="clearfix" 即可。

4. clear 属性值说明

• clear:left：清除左侧浮动，左侧不允许有浮动元素
• clear:right：清除右侧浮动
• clear:both：同时清除左右浮动（最常用）

五、补充：浮动如何实现居中？

幻灯片说明没有 float:center，居中需要搭配其他方案：

1. 方案 1：父盒子 text-align:center + 子元素 display:inline-block（不用浮动）
2. 方案 2：子元素 float:left + 父盒子设置固定宽度并 margin:0 auto

六、思维导图精简背诵版

float 浮动

1. 属性值

• none：默认不浮动
• left：左浮
• right：右浮
   
  ⚠ 无 center 居中浮动

2. 特点

• 脱离文档流、文字环绕、自动行内块、同方向并排

3. 副作用：父高度塌陷
4. 清浮动方法

• 空 div clear:both
• 父 overflow:hidden
• 伪元素 clearfix（主流）

5. clear：left / right / both