2.6 KiB
2.6 KiB
title | localeTitle |
---|---|
Float and Clear | 漂浮和清除 |
漂浮和清除
CSS float
属性指定元素应如何浮动。
CSS clear
属性指定哪些元素可以浮动在已清除元素旁边以及哪一侧。
float
属性
float
属性用于在网页上进行定位和布局。
float
属性可以具有以下值之一:
left
- 元素浮动到其容器的左侧 right
- 元素浮动到其容器的右侧 none
- 元素不浮动(将显示在文本中出现的位置)。这是默认的 inherit
- 该元素继承其父级的float值 在最简单的用法中, float
属性可用于在图像周围包装文本。
漂浮在图片中:
img {
float: right;
}
此示例指定图像应在页面中向右浮动:
img {
float: left;
}
此示例指定图像应在页面中向左浮动:
img {
float: none;
}
在下面的示例中,图像将显示在文本中出现的位置( float: none;
):
clear
财产
clear
属性指定哪些元素可以浮动在已清除元素旁边以及哪一侧。
clear
属性可以具有以下值之一:
none
- 允许两侧浮动元素。这是默认的 left
- left
不允许浮动元素 right
- right
不允许浮动元素 both
- 左侧或右侧不允许浮动元素 inherit
- 元素继承其父级的clear值 使用clear
属性的最常用方法是在元素上使用float
属性之后。
清除浮动时,应将clear
与float
匹配。如果元素浮动到left
,那么您应该left
clear
。您的浮动元素将继续float
,但清除的元素将显示在网页下方。
例:
div {
clear: left;
}
其他资源:
- MDN CSS: Float & Clear
- W3Schools教程
- CSS-Tricks: 浮动和清除