来源
“浮动”一词源自文档 “HTML2.0 的拓展”，其中指出：
ALIGN 选项有所增补，对此需要做一些解释。首先来看值 “left” 和 “right”。可以把这些对齐方式看作全新的浮动图像类型。
过去，只可能浮动图像。但 CSS 允许浮动任何元素，从图像到段落再到列表，所有元素都可以浮动。
浮动的属性
- 属性名 ：float
- 值 ： left | right | none | inherit
- 默认值 ： none
- 应用于 ： 所有元素
- 计算值 ： 根据指定确定
浮动元素的特点
- 会以某种方式将浮动元素从文档的正常流中删除，但是它还会影响布局。
- 一个元素浮动时，其他内容会“环绕”该元素。
- 浮动元素的外边距不会合并。
- 如果要浮动一个非替换元素，则必须为该元素声明一个 width。否则，根据 CSS 规范，元素的宽度趋于 0 。因此，假设浏览器的最小 width 值是 1 个字符，那么浮动段落可能只有 1 个字符宽（这种情况很少见，但确实是可能的）。
- float：none 用于防止元素浮动。
- 浮动元素的包含块是其最近的块级祖先元素。
- 浮动元素会生产一个块级框，而不论这个元素本身是什么。它会像块级元素一样摆放和表现。
控制浮动元素摆放的一系列特定规则
- 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
- 浮动元素的左（或右）外边界必修是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的低端下面。（这条规则可以防止浮动元素彼此 “覆盖” 。）
- 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
- 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
- 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
- 如果源文档中的一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行行框的顶端更高。
- 左（或右）浮动元素的左边（右边）有另外一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。
- 浮动元素必须尽可能高地放置。（对于不同的浏览器可能有不同的表现）。
- 左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会像右或向左浮动得越远。
实用行为
1.浮动元素比其父元素高时会出现：浮动元素超出了其父元素的底端（有些浏览器会增加父元素的高度，使浮动元素能够包含在父元素中，即时这会导致父元素中出现大量多余的空白）。
> CSS2.1 澄清了浮动元素行为的一个方面：
> 浮动元素会延伸，从而包含其所有后代浮动元素。所以通过将父元素置为浮动元素，就可以把浮动元素包含在其父元素内。
2.负外边居：负外边距可能导致浮动元素移到其父元素的外面。
问题：在使用负外边距时，如果浮动元素超出其父元素，文档会如何显示？
例子：一个图像可能浮动得太远，超出了用户代理已显示的一个段落。在这种情况下，要有用户代理决定文档是否重新显示。
CSS1 和 CSS2 规范明确地指出，用户代理不必重新显示已显示内容来适应文档中后来出现的内容。
也就是说如果一个图像浮动到之前已经显示的段落中，它可能只是覆盖该位置上原有的内容。另一方面，用户代理也可能采取一种不同的方法处理这种情况，让内容环绕浮动元素重现显示。
还有另外一种方法让浮动元素超出其父元素的左右边界：即浮动元素比其父元素更宽。
3.浮动元素、内容和重叠
问题：如果一个浮动元素与正常流中的内容发生重叠会怎样？
规则：
CSS2.1：
行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上“显示。
块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下“显示，而内容在浮动元素“之上“显示。
注意：这里所述的重叠行为与源文档中的顺序无关。元素在浮动元素之前还是之后出现并不重要；不论怎样的顺序，都会有同样的行为。
4.清除
目的：不希望内容流过浮动元素，某些情况下，可能要特意避免这种行为。
方法：利用 clear属性完成
例子：
//确保一个 h3 的左边没有浮动元素
h3 { clear:left; }
解释：这会把 h3 推过所有左浮动元素，不过还允许浮动元素出现在 h3 元素的右边。
属性：
属性名 ：clear
值 ： left | right | both | none | inherit
默认值 ： none
应用于 ：块级元素
计算值 ： 根据指定确定
clear : none：它允许元素浮动到另一个元素的任意两端。float: none:主要是为了支持正常文档行为，即元素允许其两边有浮动元素。- 可以用
none来覆盖其他样式。
在 CSS1 和 CSS2 中，clear 工作如下：
它会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置了clear的元素）顶端设置的外边距宽度。也就是说，清除元素的上外边距可能会调整。
在 CSS2.1 中， 引入了一个清除区域（clearance）。
清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear属性时，它的外边距并不改变。
例子：要确保一个清除元素（设置clear属性的元素）的顶端与一个浮动元素的底端之间有一定的空间，可以为浮动元素本身设置一个下外边距。