个性化阅读
专注于IT技术分析

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对齐教程。

赞(0)
未经允许不得转载:srcmini » css浮动属性float – CSS高级教程

评论 抢沙发

评论前必须登录!