CSS-Layout - Schweben-Beispiel

Diese Seite bietet häufige浮动beispiele.

Gitter / gleiche Breite der Kästen

Box 1
Box 2
Box 1
Box 2
Box 3

Durch die Verwendung float Das Attribut ermöglicht es uns, Inhalte nebeneinander zu浮动 einfach zu machen:

实例

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Drei Kästen (vier Kästen verwenden 25%, zwei Kästen verwenden 50%, usw.) */
  padding: 50px; /* Wenn Sie zwischen Bildern Abstand erhöhen möchten */
}

亲自试一试

Was ist box-sizing?

Sie können drei浮动kästen leicht nebeneinander erstellen. Aber wenn Sie Inhalte hinzufügen, um die Breite jedes Kästens zu erweitern (z.B. Innenabstand oder Rahmen), wird dieser Kästenschaden. box-sizing Das Attribut ermöglicht es uns, den Innenabstand und die Rahmen des Rahmens (und der Höhe) des Rahmens zu berücksichtigen, um sicherzustellen, dass der Innenabstand im Rahmen bleibt und nicht bricht.

Sie können in unserem CSS Box Sizing In diesem Kapitel lernen Sie mehr über das Attribut box-sizing.

Bilder nebeneinander

Dieser Kästchengitter (The grid of boxes) kann auch verwendet werden, um Bilder nebeneinander anzuzeigen:

实例

.img-container {
  float: left;
  width: 33.33%; /* Drei Kästen (vier Kästen verwenden 25%, zwei Kästen verwenden 50%, usw.) */
  padding: 5px; /* Wenn Sie zwischen Bildern Abstand erhöhen möchten */
}

亲自试一试

Gleiche Breite der Kasten

Im obigen Beispiel haben Sie gelernt, wie Sie Kästen mit gleicher Breite nebeneinander浮动. Aber es ist nicht einfach, Kästen mit gleicher Höhe zu erstellen. Eine schnelle Lösung ist es, eine feste Höhe zu setzen, wie im folgenden Beispiel gezeigt:

Box 1

Einige Inhalte, einige Inhalte, einige Inhalte

Box 2

Einige Inhalte, einige Inhalte, einige Inhalte

Einige Inhalte, einige Inhalte, einige Inhalte

Einige Inhalte, einige Inhalte, einige Inhalte

实例

.box {
  height: 500px;
}

亲自试一试

但是，这么做就失去了弹性。如果可以保证框中始终有相同数量的内容，那是可以的。但是很多时候，内容是不一样的。如果您在手机上尝试上例，则会看到第二个框的内容将显示在框的外部。这是 CSS3 Flexbox 派上用场的地方 - 因为它可以自动拉伸框使其与最长的框一样长：

实例

使用 Flexbox 创建弹性框：

Box 1 - 这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。这是一些文本，以确保内容真的很高。
Box 2 - 我的高度将跟随框 1。

亲自试一试

Flexbox 的唯一问题是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我们的 CSS Flexbox 在章节中学习有关 Flexbox 布局模块的更多知识。

导航菜单

将 float 与超链接列表一起使用，来创建水平菜单：

实例

亲自试一试

Web 布局实例

使用 float 属性完成整个 Web 布局也很常见：

实例

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

亲自试一试

更多实例

带有边框和外边距的图像浮动到段落的右侧
让图像浮动到段落的右侧。在图像上添加边框和外边距。
带标题的图像浮动到右侧
让带有标题的图像向右浮动。
让段落的第一个字母向左浮动
让段落的第一个字母向左浮动并设置该字母的样式。
用浮动创建一个网站
使用浮动创建带有水平导航栏、页眉、页脚、左侧导航栏和主要内容的首页。

所有 CSS 浮动属性

属性 描述
box-sizing 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
clear Bestimmt, welche Elemente neben dem bereinigten Element fließen können und auf welcher Seite.
float Bestimmt, wie ein Element fliegen soll.
overflow Bestimmt, was passiert, wenn der Inhalt über den Rahmen des Elements hinausgeht.
overflow-x Bestimmt, wie der Inhalt bei Überschreitung des Inhaltbereichs des Elements links/rechts behandelt wird.
overflow-y Bestimmt, wie der Inhalt bei Überschreitung des Inhaltbereichs des Elements oben/unten behandelt wird.