71 lines
2.6 KiB
Markdown
71 lines
2.6 KiB
Markdown
|
---
|
|||
|
|
title: Float and Clear
|
|||
|
|
localeTitle: 漂浮和清除
|
|||
|
|
---
|
|||
|
|
## 漂浮和清除
|
|||
|
|
|
|||
|
|
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](https://developer.mozilla.org/en-US/docs/Web/CSS/float) ＆ [Clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
|
|||
|
|
* [W3Schools教程](https://www.w3schools.com/css/css_float.asp)
|
|||
|
|
* CSS-Tricks： [浮动](https://css-tricks.com/all-about-floats/)和[清除](https://css-tricks.com/almanac/properties/c/clear/)
|