CSS 布局 - 浮动和清除

CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

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

float 属性

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

实例 - float: right;

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

css_layout_float_1.htm

实例

  1. img {
  2.   float: right;
  3. }

实例 - float: left;

下例指定图像应在文本中向左浮动：

css_layout_float_2.htm

实例

  1. img {
  2.   float: left;
  3. }

实例 - No float

在下例中，图像将显示在文本中刚出现的位置（float: none;）：

css_layout_float_none.htm

实例

  1. img {
  2.   float: none;
  3. }

延伸阅读

课外书：CSS 浮动