CSS 浮动
CSS float 属性指定一个盒子是否应该浮动。
使用 CSS 浮动元素
您可以将元素向左或向右浮动，但仅适用于生成非 绝对定位 框的元素。 浮动元素之后的任何元素都将围绕另一侧的浮动元素流动。
float 属性可能具有以下三个值之一：
| 值 | 说明 |
|---|---|
left |
元素浮动在其包含块的左侧。 |
right |
元素浮动在其包含块的右侧。 |
none |
从元素中移除 float 属性。 |
元素如何浮动
浮动元素从正常流中取出，并在包含元素的可用空间中尽可能向左或向右移动。
其他元素通常围绕浮动项目流动，除非它们的 clear 属性阻止它们这样做。 元素是水平浮动的，这意味着一个元素只能向左或向右浮动，不能向上或向下浮动。
img {
float: left;
}如果几个浮动元素相邻放置，如果有水平空间，它们将彼此相邻浮动。 如果没有足够的空间放置浮动，它会向下移动，直到它适合或没有更多浮动元素存在。
.thumbnail {
float: left;
width: 125px;
height: 125px;
margin: 10px;
}使用 Clear 属性关闭浮点数
浮动元素之后的元素将围绕它流动。 clear 属性指定元素框的哪些边不允许其他浮动元素。
.clear {
clear: left;
}注意：该属性只能从同一个块中的浮动框中清除元素。 它不会从元素本身的浮动子框中清除该元素。 要了解有关清除浮动的更多信息，请参阅 CSS 对齐方式 上的教程。
Advertisements