# float

## 概述

CSS的`float` 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。

初始值 `none` all elements, but has no effect if the value of `display` is `none`. 否 visual as specified 否 the unique non-ambiguous order defined by the formal grammar

`inline` `block`
`inline-block` `block`
`inline-table` `table`
`table-row` `block`
`table-row-group` `block`
`table-column` `block`
`table-column-group` `block`
`table-cell` `block`
`table-caption` `block`
`table-header-group` `block`
`table-footer-group` `block`
`flex` `flex`, but `float` has no effect on such elements
`inline-flex` `inline-flex`, but `float` has no effect on such elements
other unchanged

## 语法

```float: left;
float: right;
float: none;

/* Global values */
float: inherit;
float: initial;
float: unset;
```

`left`

`right`

`none`

### 形式化语法

```left | right | none | inline-start | inline-end
```

## 例子

``````<style type="text/css">
div { border: solid red;  max-width: 70ex; }
h4  { float: left;  margin: 0; }
</style>

<div>
<h4>HELLO!</h4>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>``````

#### HELLO!

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

#### HELLO!

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

### 清除浮动

```h2.secondHeading { clear: both; }
```

```p.withRedBoxes { overflow: hidden; height: auto; }
```
Note: 设置`overflow``scroll` 也可以让块元素撑大来包含所有的浮动子元素，但是这样不论内容有多少都会显示出一个滚动条。即使 `height` 默认值为 `auto`，我们还是设置了，是为了表明容器应该增大高度以便包裹住里面的内容。

## 规范

CSS Basic Box Model
float
Working Draft 大量新属性值，但目前还没完全定义清楚。任何与新特性无关的浏览器差异应该是无意中造成的，需要报告。
CSS Level 2 (Revision 1)
float
Recommendation 没有改变。
CSS Level 1
float
Recommendation 最初的定义。

最后编辑者: fscholz,