CSS Float

CSS float 属性指定框是否应该浮动。

使用 CSS 浮动元素

你可以向左或向右浮动元素,但仅适用于生成未绝对定位的框的元素。跟随浮动元素的任何元素将围绕另一侧的浮动元素流动。

float 属性可能具有以下三个值之一:

描述
left 元素浮动在其包含块的左侧。
right 元素浮动在其包含块的右侧。
none 从元素中删除 float 属性。

元素是如何浮动的

浮动元素从正常流动中取出并尽可能在容纳元件的可用空间中向左或向右移动。

其他元素通常围绕浮动元素流动,除非它们的 clear 属性阻止它们这样做。元素水平浮动,这意味着元素只能向左或向右浮动,而不能向上或向下浮动。

img {
    float: left;
}

如果几个浮动元素相邻放置,如果有水平空间,它们将彼此相邻浮动。如果没有足够的空间放置浮子,它会向下移动,直到它适合或者不再存在浮动元素。

.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

使用 clear 特性关闭 float

浮动元素之后的元素将围绕它流动。clear 属性指定元素框的哪些边不允许其他浮动元素。

.clear {
    clear: left;
}

注意: 此属性只能从同一块中的浮动框清除元素。它不会清除元素本身中浮动子框的元素。要了解有关清除浮动的更多信息,请参阅 CSS 对齐教程。