上一章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对齐教程。
推荐阅读
- css元素对齐属性 – CSS高级教程
- css图层z-index元素叠加 – CSS高级教程
- css position定位属性 – CSS高级教程
- css元素的可视属性visibility – CSS高级教程
- css display显示属性 – CSS高级教程
- css可视格式化模型 – CSS高级教程
- css属性单位 – CSS高级教程
- css维度属性 – CSS高级教程
- css内容溢出处理 – CSS高级教程