层叠样式表/浮动元素
IE6 和 IE7 会将浮动元素放置在作为其前一个兄弟元素的内联框下方
如果内联元素与其前一个兄弟元素相比浮动在其右侧，则 IE6 和 IE7 会将内联元素放置在浮动元素下方
如果容器具有右浮动子元素和未定义宽度，则 IE6 和 IE7 会将样式设置为 float:left 的元素收缩包装到其包含块的宽度
即使 IE6 和 IE7 清除的元素没有共享包含块，它们也会清除其他嵌套浮动
IE6 和 IE7 清除的元素在显示时将具有其声明的顶部填充的两倍
浮动框可以与正常流中相邻的块级框重叠，因此使用 clear 属性在流中重新定位静态框
clear 属性可以用于浮动元素，以将其强制在相邻浮动下方，这对于对齐同一方向上浮动的多个块很有用
clear 属性指定元素是否可以在其左侧、右侧或根本不允许元素浮动。当元素不允许在一侧浮动时，该元素将出现在浮动元素下方。
包括 6 在内的 Internet Explorer 版本会向相邻的线框添加 3 像素的填充（在浮动方向上）。
在包括 6 在内的 Internet Explorer 版本中，浮动元素与其父元素的侧边缘相接触时，左右边距会加倍。边距值在其接触父元素的一侧加倍。解决此问题的简单方法是将浮动元素的 display 设置为 inline。
包括 7 在内的 Windows 版本的 Internet Explorer：会将浮动框放置在紧接其前的线框下方 会将左浮动框扩展到包含块的宽度，如果它具有右浮动子元素和计算宽度为 auto 会将布局应用于浮动元素 不支持除了可见性和方向以外任何属性的 inherit 值
在包括 2.0 在内的 Firefox 版本中，浮动框出现在紧接其前的线框下方。具有右浮动子元素和计算宽度为 auto 的左浮动框扩展到包含块的宽度。
在包括 9.2 在内的 Opera 版本中，如果浮动框的计算宽度为 auto 且具有浮动子元素，则其宽度将按浮动不包装也不清除的方式计算。
使用 overflow: auto; display: block; float: left; margin: 0 auto; 将块元素定位在同一行上。
浮动元素被周围的块内容收缩包装，除非周围的块将 overflow 设置为 auto 或 hidden，在这种情况下，它们将被视为内联块。
在 IE6 和 IE7 中，浮动元素紧随绝对定位元素将导致绝对定位元素消失，除非将绝对定位元素设置为 clear:both
为了跨浏览器一致性，不要对已清除的静态内容应用顶部边距，而要对浮动应用底部边距。
浮动元素不支持边距折叠
内联元素不支持清除
绝对定位元素不支持浮动
浮动元素不支持内联块或内联表格，每个元素分别呈现为块或表格
浮动元素导致相邻的内联元素重新流。
CSS 规则
.sidenote {
float:left;
width:10em;
padding:0.5em;
border:1px solid green;
margin:0.5em 1em 0.2em 0
}
示例 HTML
<p class="sidenote">This sentence is a note inserted to one side of the main text.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
示例呈现
这句话是插入到正文一侧的注释。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
多个对象可以浮动在同一个块中
CSS 规则
.outerBlock {
float:left;
width:100%;
background-color:yellow
}
.shortBlock {
float:left;
width:30%;
height:1em;
margin:2px;
background-color:red
}
.tallBlock {
float:left;
width:30%;
height:2em;
margin:2px;
background-color:blue
}
示例 HTML
<div class="outerBlock">
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
</div>
示例呈现
clear 属性决定浮动元素的哪一边可以被任何之前的浮动元素占据。该属性对后面的浮动元素没有影响。
可能的值
- left
- right
- both
- none
要了解效果，请比较以下示例，这些示例包含一个非浮动元素和两个浮动元素。
在第一个示例中，没有使用clear 属性。
<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮动框 1。
浮动框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
在第二个示例中，在第二个元素中使用了clear 属性，以确保没有先前的浮动元素出现在其左侧。
<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; clear: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮动框 1。
浮动框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
在第三个示例中，float 属性没有影响，因为它只影响之前的浮动元素。
<p style="float: left; clear: both; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</p>
浮动框 1。
浮动框 2。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
一些提示
- 简要讨论 CSS 中的“遗留”与“XML”样式的“clear”。.
- “清除浮动元素下方的空间”。
- 如果你想在所有浮动元素周围添加边框，例如...
- W3.org：“控制浮动旁边的流：‘clear’ 属性”。
