Fassen Sie die durch CSS-Floats verursachten Probleme mit dem Inhaltsüberlauf zusammen und wie Sie diese beheben können

Der Float-Effekt von CSS ist in einigen Fällen sehr instabil. Wenn die Steuerung nicht gut ist, ist es normalerweise besser, den Float zu löschen. Hier werden die durch CSS-Float verursachten Inhaltsüberlaufprobleme und die Methode zum Löschen des Floats zusammengefasst

Um einen Problemblock (Anzeige: Block) zu werfen, schauen wir uns zunächst das Phänomen an:
In Nicht-IE-Browsern (wie Firefox), wenn die Höhe des Containers ist automatisch und der Inhalt des Containers enthält Floats ( float (links oder rechts). In diesem Fall kann die Höhe des Containers nicht automatisch erweitert werden, um sich an die Höhe des Inhalts anzupassen, was dazu führt, dass der Inhalt außerhalb des Containers überläuft und das Layout beeinträchtigen (oder sogar zerstören). Dieses Phänomen wird als Float-Überlauf bezeichnet, und die zur Verhinderung dieses Phänomens durchgeführte CSS-Verarbeitung wird als CSS-Clear-Float bezeichnet.
Um das W3C-Beispiel zu zitieren: Der Nachrichtencontainer umschließt keine schwebenden Elemente.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }

<p class="news">
<img  src="/static/imghw/default1.png"  data-src="news-pic.jpg"  class="lazy"   / alt="Fassen Sie die durch CSS-Floats verursachten Probleme mit dem Inhaltsüberlauf zusammen und wie Sie diese beheben können" >
<p>some text</p>
</p>

Freier Float:

1. Fügen Sie das Tag
nach dem schwebenden Element hinzu.

　<br/>标签有自带的清除浮动属性；

2.

　<p>

　　　　<p style="float:left"></p>

　　　　<p style="float:left"></p>

　　　　<p style="clear:both"></p>

　　</p>

3, fügen Sie den overflow:auto-Stil zum schwebenden Element hinzu;

4, stellen Sie ihn ein das letzte schwebende Element Der folgende Stil:

/* 清理浮动 */
.clearfix:after {   
 visibility:hidden;   
 display:block;   
 font-size:0;   
 content:" ";   
 clear:both;   
 height:0;   
}   
.clearfix {   
 zoom:1;   
}

Das Prinzip besteht darin, die :after-Pseudoklasse im „erweiterten“ Browser zu verwenden, um eine Nichtanzeige hinzuzufügen: none nach dem Floating-Block. Machen Sie den Blockinhalt sichtbar und setzen Sie darauf „clear:both“, um die Floats zu löschen. Fügen Sie haslayout zum Floating-Block in IE6 und 7 hinzu, um den Floating-Block anzuheben und den Dokumentenfluss normal zu beeinflussen.

5, eine weitere einfache Methode:

.cf:before, .cf:after {   
    content:"";   
    display:table;   
}   
.cf:after {   
    clear:both;   
}   
.cf {   
    zoom:1;   
}

Das Prinzip ist immer noch dasselbe. Verwenden Sie die Pseudoklasse :after, um „clear:both“ nach einem Float bereitzustellen. Der Unterschied besteht darin, dass display:table verwendet wird, um diesen Leerraum auszublenden. Anstatt „visibility:hidden;height:0;font-size:0;“ festzulegen.

Bemerkenswert ist hier die Pseudoklasse :before. Tatsächlich wird es zur Bearbeitung des oberen Randes beim Falten verwendet und hat nichts mit dem Bereinigen von Floats zu tun. Da Floating jedoch einen Blockformatierungskontext erstellt, sollten sie nicht reduziert werden, wenn ein anderes Element auf einem Floating-Element zufällig einen Rand unten und dieses Floating-Element zufällig einen Rand oben hat (obwohl dies ungewöhnlich ist).

Das obige ist der detaillierte Inhalt vonFassen Sie die durch CSS-Floats verursachten Probleme mit dem Inhaltsüberlauf zusammen und wie Sie diese beheben können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!