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

上一章CSS高级教程请查看:css图层z-index元素叠加
CSS浮动属性float指定一个框是否应该浮动。
使用CSS的浮动元素你可以将元素向左或向右浮动,但仅应用于生成不完全定位的方框的元素。浮动元素之后的任何元素都将在另一侧围绕浮动元素流动。
浮动属性可以有三个值中的一个:

描述
left 元素在其包含块的左侧浮动。
right 元素在它的包含块的右边浮动。
none 没有从元素中移除浮动属性。
多元素浮动被浮动的元素从正常的流中取出,并在包含元素的可用空间内尽可能向左或向右移动。
其他元素通常围绕被浮动的项流动,除非它们的clear属性阻止它们这样做。元素是水平浮动的,这意味着一个元素只能向左或向右浮动,而不能向上或向下浮动。
img { float: left; }

如果将几个浮动元素邻接放置,如果有水平空间,它们将彼此浮动。如果没有足够的空间放置浮动,则将其向下移动,直到适合它或不再存在浮动元素为止。
.thumbnail { float: left; width: 125px; height: 125px; margin: 10px; }

使用清除属性关闭浮动浮动元素之后的元素将围绕它流动。clear属性指定元素框中不允许其他浮动元素的边。
.clear { clear: left; }

【css浮动属性float – CSS高级教程】注意:此属性只能清除同一块内浮动的方框中的元素。它不清除元素本身中浮动的子框中的元素。有关清除浮动的更多信息,请参阅CSS对齐教程。

    推荐阅读