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:

 
左侧区域
 
右侧区域
 

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:

 
左侧区域
 
右侧区域
 
 

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 Sieclear:bothfest, um anzugeben, dass das Tag aus dem Floating gelöscht wird.clear:both，表示该标签清除浮动。

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

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

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

HTML：

 
左侧区域
 
右侧区域
 

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：

 
左侧区域
 
右侧区域
 

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

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