float 与 clear

CSS 中，float 用于将元素从正常文档流中取出，向左或向右浮动；clear 用于控制元素不与浮动元素重叠，常用于清除浮动影响。

1. float 属性

• float: left; 元素向左浮动。
• float: right; 元素向右浮动。
• float: none; 取消浮动，默认值。

浮动元素会脱离正常文档流，后续内容会环绕浮动元素。

float: left;

2. clear 属性

用来防止元素与之前的浮动元素重叠，清除浮动。

• clear: left; 不允许左侧有浮动元素。
• clear: right; 不允许右侧有浮动元素。
• clear: both; 不允许左右两侧有浮动元素。

clear: both;

3. 清除浮动的重要性

浮动元素脱离文档流，父容器高度可能塌陷，使用 clear 或其他方法（如 clearfix）修复。

float 与 clear 示例

loading