# float 与 clear

URL: https://caijiao.org/css/06-position-float/02-float-clear
Source: docs/css/06-position-float/02-float-clear.md
Description: float 属性实现元素的浮动布局，clear 属性用于清除浮动，避免布局错乱。

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

## 1. float 属性

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

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

```css
float: left;
```

## 2. clear 属性

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

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

```css
clear: both;
```

## 3. 清除浮动的重要性

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

## float 与 clear 示例

[在线代码演示](/css/demos/12.html)