css浮动属性float – CSS高级教程

上一章CSS高级教程请查看：css图层z-index元素叠加

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

使用CSS的浮动元素

你可以将元素向左或向右浮动，但仅应用于生成不完全定位的方框的元素。浮动元素之后的任何元素都将在另一侧围绕浮动元素流动。

浮动属性可以有三个值中的一个：

多元素浮动

被浮动的元素从正常的流中取出，并在包含元素的可用空间内尽可能向左或向右移动。

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

img {
    float: left;
}

如果将几个浮动元素邻接放置，如果有水平空间，它们将彼此浮动。如果没有足够的空间放置浮动，则将其向下移动，直到适合它或不再存在浮动元素为止。

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

使用清除属性关闭浮动

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

.clear {
    clear: left;
}

注意：此属性只能清除同一块内浮动的方框中的元素。它不清除元素本身中浮动的子框中的元素。有关清除浮动的更多信息，请参阅CSS对齐教程。