Float-Definition und Float-Clearance (BFC)-CSS-Tutorial-php.cn

Float-Definition und Float-Clearance (BFC)

零下一度

Freigeben： 2017-05-10 11:57:30

Original

1669 Leute haben es durchsucht

Float

1. Was ist Float?

Float tritt auf, wenn das <a href="//m.sbmmt.com/wiki/919.html" target="_blank">float</a> -Attribut des Elements nicht none ist.

<p class="float">float</p>

Nach dem Login kopieren

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

Nach dem Login kopieren

2. Die Auswirkung von Floating

Floating führt dazu, dass Elemente aus dem Dokumentenfluss ausbrechen, insbesondere wie folgt:

Das übergeordnete Element ist stark reduziert, d. h. es enthält keine schwebenden Elemente.
Zum Beispiel wird der obige Code als

Das übergeordnete Element wird stark reduziert

Textumbruch angezeigt .

Float-Definition und Float-Clearance (BFC)

Textumbrucheffekt

Sie können feststellen, dass die Breite des .normal-Elements das .float abdeckt Element, aber es gibt keinen Text unter dem .float-Element, was bedeutet, dass der Text „herausgedrückt“ wird. Dies liegt daran, dass er zwar aus dem Dokumentfluss ausbricht, aber nicht aus dem Textfluss ausbricht. Dieser Effekt ist auch die ursprüngliche Absicht des float-Attributs. Der Code lautet wie folgt:

float

正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素正常元素

Nach dem Login kopieren

body {
  background-color: #ccc;
}
.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: #ddd;
}
.normal {
  background-color: #fff;
}

Nach dem Login kopieren

Die Ränder von schwebenden Elementen werden nicht zusammengeführt.
Für verwandte Inhalte zur Margenzusammenführung können Sie hier klicken. Sobald das Element
schwebend ist, wird es zu einem Inline-Blockelement, d. h. <a href="//m.sbmmt.com/wiki/927". .html" target= "_blank">display<code><a href="//m.sbmmt.com/wiki/927.html" target="_blank">display</a>: inline-block: inline-block.

3. Floating-Anwendung

Textumbruch wie oben erwähnt.
Schreiben Sie ein dreispaltiges Layout mit fester Breite links und rechts und adaptiver Mitte.
```
<body>
 left
 right
 自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
</body>
```
Nach dem Login kopieren
```
body {
 background-color: #ccc;
}
.float {
 float: left;
 width: 100px;
 height: 100px;
 background-color: #ddd;
}
.left {
 float: left;
}
.right {
 float: right;
}
.mid {
 height: 100px;
 background-color: #fff;
 margin: 200px; /*故意加上了上下 margin 值*/
}
```
Nach dem Login kopieren
Hier habe ich absichtlich den Wert margin hinzugefügt, und Sie können den Effekt sehen:

drei Spalten Das Layout
body fällt auch mit dem .mid von margin zusammen. Dies kann durch die zuvor eingeführte Randzusammenführung erklärt werden.
ps: Als ich dieses dreispaltige Layout zum ersten Mal schrieb, war das HTML so geschrieben
```
<body>
 left
 自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素自适应宽度元素
 right
</body>
```
Nach dem Login kopieren
Schreiben Sie wie oben das mittlere adaptive Element in die Mitte. Tatsächlich ist dies der Fall Konsistenter. Logik, aber wenn es so geschrieben wird, wird das Element auf der rechten Seite nicht funktionieren, da das Element .mid ein Element auf Blockebene ist und nicht die gesamte Zeile ausfüllt herunterfallen, da es sich ursprünglich außerhalb des Dokumentenflusses schwebender Elemente befindet. .left

Floating löschen

Bei untergeordneten Elementen löschen

Hier schreibe ich nur Methoden, die keine bedeutungslosen Tags erzeugen.

Wenn sich hinter dem schwebenden Element ein Geschwisterelement befindet, können Sie das Attribut
zu seinem Geschwisterelement hinzufügen. clearWenn Text diesen Teil des Codes umgibt, fügen Sie
oder .normal zu clear:left hinzu. Auf die spezifische Verwendung von clear:both wird hier nicht näher eingegangen. clear
Fügen Sie dem Element, dessen Floating gelöscht werden soll, eine Pseudoklasse oder ein Pseudoelement hinzu.
```
.float::after {
  content: &#39;&#39;;
  display: block;
  visiability: hidden;
  height: 0;
  clear: both;
}
```
Nach dem Login kopieren
Informationen zur Verwendung von ::after finden Sie in der MDN-Dokumentation.
wird im übergeordneten Element gelöscht, d. h. BFC
BFC (Block Formatting Context), d. h. Formatierungskontext auf Blockebene, seine offizielle Erklärung lautet:

schwebende, absolut positionierte Elemente (
ist position oder absolute), Inline-Blockelement fixed, Tabellenzelle display:inline-block, Tabellentitel display:table-cell und display:table-caption Attributwert ist nicht Das overflow-Element (außer wenn der Wert an das Ansichtsfenster visible weitergegeben wird) erstellt einen neuen Formatierungskontext auf Blockebene. viewport

Zusammenfassend muss es eine der folgenden Bedingungen erfüllen:
1. Nicht floatnone
2. ist nicht position oder staticrelative
3. ist display, table-cell, table-caption, inline-block, flexinline-flex
4. Nicht overflowvisible
Solange Sie dem übergeordneten Element eines der oben genannten Attribute hinzufügen, um die Bedingungen zu erfüllen, ist das der Fall Das heißt, fügen Sie es dem übergeordneten Element hinzu. Gehen Sie zu BFC, um den Float von untergeordneten Elementen zu löschen.
【Verwandte Empfehlungen】
1.
Kostenloses CSS-Online-Video-Tutorial
2.
CSS-Online-Handbuch
3.
php.cn Dugu Jiujian (2) – CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonFloat-Definition und Float-Clearance (BFC). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!