freeCodeCamp

2.6 KiB

Raw Blame History

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：浮动和清除

2.6 KiB Raw Blame History Unescape Escape