2.6 KiB
2.6 KiB
title, localeTitle
| 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 ，但清除的元素将显示在网页下方。
例：
资料来源：CSS-TRICS
div {
clear: left;
}
资料来源：CSS-TRICS
其他资源：
- MDN CSS： Float ＆ Clear
- W3Schools教程
- CSS-Tricks： 浮动和清除