CSS 布局 - 浮动和清除

CSS float 属性指定一个元素应沿其容器的左侧或右侧放置。

CSS clear 属性指定哪些元素可以漂浮在已清除元素的旁边以及在哪一侧。

浮动属性 float

float 可选值：

• none - 元素不浮动，默认选项
• inherit - 元素继承其父元素的浮动值
• left - 元素浮动到其容器的左侧
• right - 元素浮动到其容器的右侧

指定图像应在文本中向右浮动：

img {
  float: right;
}

清除浮动

浮动的元素会浮在不浮动元素额上层，同时会占用不浮动元素的空间。如果我们像后面的元素不受浮动元素的影响，我们需要使用 clear 清除浮动。

clear 属性的可选值：

• none - 不会清除前面元素的浮动，这是默认的
• left - 清除左侧的浮动，元素被推到左浮动元素下方
• right - 清除右侧的浮动，元素被推到右侧浮动元素下方
• both - 清除两侧的浮动
• inherit - 继承父元素的清除设定

清除浮动时，应该匹配的清除：如果元素向左浮动，则应向左清除。否则可能达不到效果。

.clear {
  clear: left;
}