CSS Clear Float

CSS-Tipps: Clearfix

Floating ist eine sehr wichtige Layout-Technologie in CSS und wird häufig im Webseiten-Layout verwendet. Dies führt jedoch auch zu einigen Problemen, z. B. zum Zusammenbruch der Höhe des übergeordneten Elements. Die Clearfix-Technologie wurde entwickelt, um dieses Problem zu lösen. In diesem Artikel werden verschiedene gängige Methoden zum Löschen von Floats vorgestellt.

1. Das Problem des Schwebens

Lassen Sie uns zunächst das Problem des Schwebens verstehen.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Der Effekt ist wie im Bild unten dargestellt:

Wie Sie sehen können, wird die Floating-Technologie sowohl im linken als auch im rechten Bereich verwendet. Wenn wir jedoch möchten, dass die Höhe des übergeordneten Elements (d. h. .parent) gleich der Höhe des untergeordneten Elements ist, treten die folgenden Probleme auf:

Sie können sehen, dass die Höhe des übergeordneten Elements gleich war deutlich reduziert. Dies liegt daran, dass die untergeordneten Elemente Floating verwenden, sich also außerhalb des Dokumentflusses befinden und das übergeordnete Element sie nicht enthält, was dazu führt, dass sie nicht in die Höhenberechnung einbezogen werden.

2. Mehrere Methoden zum Löschen von Floats

Um dieses Problem zu lösen, müssen wir das übergeordnete Element die Höhe neu berechnen lassen, indem wir die Floats löschen. Hier sind einige häufig verwendete Methoden zum Löschen von Floats:

1. Verwenden Sie leere Tags, um Floats zu löschen.

Dies ist eine sehr häufige Methode, die die Eigenschaften leerer Tags zum Löschen von Floats nutzt. Der Code lautet wie folgt:

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS :

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Fügen Sie am Ende des übergeordneten Elements ein leeres Tag hinzu und legen Sie clear:both fest, um anzugeben, dass das Tag aus dem Floating gelöscht wird. clear:both，表示该标签清除浮动。

但是这种方法比较麻烦，需要添加一个无意义的标签，不利于代码的维护。

2、使用 ::after 伪元素清除浮动

与第一种方法类似，使用 ::after 伪元素来清除浮动。由于 ::after 是一个块元素，可以在浮动元素后面添加一个块级元素来清除浮动。

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

在父元素上使用 ::after 伪元素，并设置 content:"";display:block;clear:both;，表示在父元素之后添加一个块级元素，清除浮动。

这种方法只需要在父元素上添加 CSS 样式，不需要添加多余的 HTML 标签，非常方便。

3、使用 BFC 清除浮动

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个概念，它可以让元素在一个独立的渲染区域内进行渲染，可以清除浮动，实现方式如下：

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

在父元素上设置 overflow:hidden

Aber diese Methode ist problematischer und erfordert das Hinzufügen eines bedeutungslosen Tags, was der Codepflege nicht förderlich ist.

2. Verwenden Sie das Pseudoelement ::after, um Floats zu löschen.

Verwenden Sie ähnlich wie bei der ersten Methode das Pseudoelement ::after, um Floats zu löschen. Da ::after ein Blockelement ist, können Sie nach dem Float-Element ein Element auf Blockebene hinzufügen, um den Float zu löschen.

HTML: 🎜rrreee🎜CSS: 🎜rrreee🎜Verwenden Sie das Pseudoelement ::after für das übergeordnete Element und setzen Sie content:"";display:block;clear:both;, um dies anzuzeigen das übergeordnete Element Fügen Sie dann ein Element auf Blockebene hinzu und löschen Sie den Float. 🎜🎜Diese Methode erfordert nur das Hinzufügen von CSS-Stilen zum übergeordneten Element, ohne zusätzliche HTML-Tags hinzuzufügen, was sehr praktisch ist. 🎜🎜3. Verwenden Sie BFC, um Floats zu löschen. BFC (Blockformatierungskontext, Formatierungskontext auf Blockebene) ermöglicht das Rendern von Elementen in einem unabhängigen Rendering-Bereich und die Implementierung ist wie folgt folgt:🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Setzen Sie overflow:hidden für das übergeordnete Element. Zu diesem Zeitpunkt bildet das übergeordnete Element einen BFC, damit die schwebenden Elemente korrekt eingebunden werden können. 🎜🎜Aber diese Methode weist auch einige Einschränkungen auf, da sie den Stil des übergeordneten Elements ändert. Beispielsweise kann das übergeordnete Element weder negative Ränder noch das Z-Index-Attribut festlegen. 🎜🎜3. Zusammenfassung🎜🎜In diesem Artikel werden verschiedene Methoden zum Löschen von Floats vorgestellt, darunter die Verwendung leerer Tags zum Löschen von Floats, die Verwendung von ::after-Pseudoelementen zum Löschen von Floats und die Verwendung von BFC zum Löschen von Floats. Diese Methoden sind alle praktizierte Techniken und können in der Projektentwicklung flexibel eingesetzt werden, um durch Floating verursachte Probleme zu lösen. 🎜

Das obige ist der detaillierte Inhalt vonCSS Clear Float. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!