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

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

高洛峰
Freigeben: 2017-03-09 17:50:25
Original
1854 Leute haben es durchsucht

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;   
  }
Nach dem Login kopieren
<p class="news">
<img  src="news-pic.jpg" / 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>
Nach dem Login kopieren

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

Freier Float:

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

 <br/>标签有自带的清除浮动属性;
Nach dem Login kopieren

2.

 <p>

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

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

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

  </p>
Nach dem Login kopieren

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;   
}
Nach dem Login kopieren

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;   
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage