CSS 布局 - 浮动和清除

CSS 布局 - 浮动和清除

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

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

float 属性

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

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

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

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

实例 - float: right;

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

Pineapple

领先的 Web 技术教程 - 全部免费。在 W3School,你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP。

我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。

在 W3School,我们提供上千个实例。通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

实例

img {
  float: right;
}

亲自试一试

实例 - float: left;

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

Pineapple

领先的 Web 技术教程 - 全部免费。在 W3School,你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP。

我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。

在 W3School,我们提供上千个实例。通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

实例

img {
  float: left;
}

亲自试一试

实例 - No float

在下例中,图像将显示在文本中刚出现的位置(float: none;):

Pineapple 领先的 Web 技术教程 - 全部免费。在 W3School,你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP。 我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术:HTML、CSS、XML 。以及其他技术,诸如 JavaScript、PHP、SQL 等。 在 W3School,我们提供上千个实例。通过使用我们的在线编辑器,你可以编辑这些例子,并对代码进行实验。

实例

img {
  float: none;
}

亲自试一试

延伸阅读

课外书:CSS 浮动

CSS 基础教程

CSS 中级教程

CSS3 高级教程

CSS 响应式设计

CSS 网格教程

CSS 实例

CSS 测验

CSS 参考手册

目录