首页
笔记
想法
项目
其它
浮动
CSS允许浮动任何元素，使用属性 float 实现：
float
值：
left
|
right
|
none
|
inherit
初始值：
none应用于：
所有元素
继承性：
无
计算值：
根据指定确定
以下是一个浮动的图像示例：
浮动元素会被文档的正常流排除。
一个元素浮动时，其它内容会环绕该元素。
浮动元素的外边距不会和其它元素的外边距合并。如果两个浮动元素相邻，它们的外边距也不会合并。
如果确实要浮动一个非替换元素，则必须为该元素声明一个 width ，否则元素的宽度会趋于0。
float: none 用于防止元素浮动。
浮动的细节
浮动元素的包含块(containing block)是其最近的块级祖先元素。
此外，浮动元素还会生成一个块级框，不论该元素是什么。
浮动元素的摆放规则为：
- 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界（作为内容的一部分存在）。
- 浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（或左）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。（所有的浮动内容都是可见的）
- 左浮动元素的右外边界不会在其右边右浮动元素的的左外边界的右边。同理，右浮动元素的左外边界不会在其左边左浮动元素的的右外边界的左边。（浮动元素不会相互重叠）
- 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时作用效果类似两个元素之间的块级父元素。（防止浮动元素一直浮动到文档顶端，并防止浮动元素一直浮动到共同父元素的顶端）
- 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
- 如果源文档中一个浮动元素之前出现另一个浮动元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。（不允许该元素浮动到包含该浮动元素之前的内容的顶端上）
- 左（或右）浮动元素的左边（或右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（或左）边界的右边（左边）。（浮动元素不能超出其包含元素的边界）
- 浮动元素必须尽可能高地放置（除非受到前几条规则的限制）
- 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。位置越高，就会向左或向右浮动得越远。（除非受到前几条规则的限制）
浮动元素可能超出包含元素的下边界。
浮动元素会延伸，从而包含其所有后代浮动元素。
为了防止内容被覆盖，浮动元素作用范围内的正常元素内容会让开一段距离，但是背景不会让开（为了保持宽度与父元素相关）。
通过设置负外边距，可能导致浮动元素移到其父元素的外面。（这只是视觉效果，并不违反规矩）
- 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示
- 块框与一个浮动元素重叠时，其边框与背景在该浮动元素之下显示
清除
有时候并不希望内容流过浮动元素，清除用于禁止浮动元素出现在它旁边：
clear
值：
left
|
right
|
both
|
none
|
inherit
初始值：
none应用于：
块级元素
继承性：
无
计算值：
根据指定确定
这个值防止了元素的哪边存在浮动元素。
清除的效果为：
清除并不会改变元素的外边距，之所以会向下移动是外边距上加的额外清除区域(clearance)的间隔。
要确保一个清除元素的顶端与一个浮动元素的底端之间有一定空间，可以为浮动元素本身设置一个下外边距。
浮动元素的下边距会增加浮动框的大小，且由于清除元素必须推到浮动框下面的某个点以下，浮动框大小的增加会使这个点下移。