CSS-Attribut-Float-Lernerfahrung

Volltextreferenz: http://www.linzenews.com/program/net/2331.html

Lassen Sie uns einen Blick darauf werfen die Bedeutung der CSS-Eigenschaft --float.

Der folgende Inhalt ist in folgende Unterabschnitte unterteilt:

1: Float-Attribut

2: Eigenschaften des Float-Attributs

2.1: Fließender Textumbrucheffekt

2.2: Das Vaterelement von float ist stark kollabiert

3: Methode zum Löschen von Floats

3.1: HTML-Methode

3.2: CSS-Pseudoelementmethode

4: Despace-Float

5: Float-Elemente blockieren

6: Float-Fluid-Layout

6.1: Einseitige Fixierung

6.2: Einseitige Fixierung mit unterschiedlichen DOM- und Displaypositionen

6.3: Einseitige Fixierung des DOM an der gleichen Position wie das Display

6.4: Intelligentes Layout


1: Float-Attribut

Float bedeutet, wie der Name schon sagt, Schweben. Aber in CSS wird es als Float verstanden. float hat vier Attribute, nämlich

1 float:none;
2 float:left;
3 float:right;
4 float:inherit;

Die beiden am häufigsten verwendeten Attributwerte sind linksschwebend und rechtsschwebend. Im folgenden Teilen wird nur Left Floating als Beispiel verwendet. Das Prinzip anderer schwebender Attributwerte ist das gleiche wie das des linken Gleitens.

2: Eigenschaften des Float-Attributs

　2.1: Der Textumbrucheffekt von Float

Die ursprüngliche Absicht von Floating ist der Textumbrucheffekt.

Sehen Sie sich den folgenden Code und die folgende Demo an.

1 <div class="container">
2     <div class="content"></div>
3     <p>
4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
5         </p>
6     </div>    

 1 .container {
 2   width: 300px;
 3   height: 300px;
 4   border: 1px solid black;
 5 }
 6 .container .content {
 7   float: left;
 8   width: 150px;
 9   height: 150px;
10   background-color: lightpink;
11   margin: 5px;
12 }

Das

content-Element ist auf „Left Floating“ eingestellt, sodass das div-Element vom Dokumentfluss getrennt wird und der Text darum herum angezeigt wird.

　2.2: Das Vaterelement von Float ist stark kollabiert

Nehmen Sie das div-Element als Beispiel. Die Höhe des div-Elements wird automatisch um den Inhalt erweitert. Mit anderen Worten: Die Höhe ist so hoch wie der Inhalt. Wenn jedoch das Float-Attribut für das interne Element festgelegt ist, verringert sich die Höhe des übergeordneten Elements. Der Code und die Beispiele lauten wie folgt.

1 <div class="container">
2     <p>
3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4     </p>
5 </div>

Wie unten gezeigt, CSS und Demo nach dem Zusammenklappen.

1 .container {
2   width: 300px;
3   border: 1px solid black;
4 }
5 .container p {
6   float: left;
7 }

Sie können die Änderungen sehen, die vor und nach dem Festlegen des Unterelements auf Float vorgenommen wurden.

3: Methode zum Löschen von Floats

Dann stellt sich die Frage: Wenn die internen Elemente schweben sollen, wie kann dann vermieden werden, dass die Höhe des übergeordneten Elements zusammenbricht?

Einige Schüler werden sicherlich denken: Wäre es nicht ausreichend, die Höhe direkt am übergeordneten Element festzulegen? Dies ist in der Praxis nicht möglich. Denn wenn die Höhe des übergeordneten Elements festgelegt ist und Sie später Inhalte hinzufügen möchten, müssen Sie den CSS-Code ändern, was sehr mühsam ist.
Es gibt zwei Möglichkeiten, das Problem des Höheneinbruchs des übergeordneten Elements zu lösen.
　3.1: Fügen Sie am unteren Rand des übergeordneten Elements ein leeres div hinzu und fügen Sie dann das Attribut „clear: Both“ hinzu.

Der Code lautet wie folgt.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5             <div class="clearfix"></div>
6         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4 }
 5 .container p {
 6   float: left;
 7 }
 8 .container .clearfix {
 9   overflow: hidden;
10   *zoom: 1;
11 }

　3.2: Das übergeordnete Element legt die Pseudoklasse danach fest.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4   *zoom: 1;
 5 }
 6 .container p {
 7   float: left;
 8 }
 9 .container:after {
10   content: "";
11   display: table;
12   clear: both;
13 }

4: Float-Elemente aus dem Leerraum entfernen

Was bedeutet

? Um bei der täglichen Codierung den HTML-Codierungsstandards zu entsprechen, werden den HTML-Tags Einrückungen hinzugefügt, um einen schönen Effekt zu erzielen. Allerdings werden beim Einrücken Leerzeichen erzeugt, also  . Wenn Sie für ein Element „Left Floating“ festlegen, schwebt das Element selbst nach links und die verbleibenden Leerzeichen werden bis zum Ende zusammengedrückt, was dem oben erwähnten -Textumbrucheffekt entspricht. Beachten Sie jedoch, dass   etwas andere Auswirkungen hat als das Drücken der Eingabetaste.

5: Float-Elemente blockieren

Nachdem das Floating-Attribut für das Inline-Element festgelegt wurde, ändert sich das Anzeigeattribut von Inline zu Block. Und Sie können die Breite und Höhe für Inline-Elemente festlegen. Einige einfache Layouteffekte mit fester Breite können mithilfe der Attribute „float“ und „width“ erzielt werden.

6: Float-Fluid-Layout

6.1: Auf einer Seite behoben, auf der rechten Seite adaptives Layout.

1         <div class="container">
2             <div class="left">左浮动+固定宽度</div>
3             <div class="right">右边自适应宽度+margin-left</div>
4         </div>

 1 .container{
 2     max-width:90%;
 3     margin:0 auto;
 4 }
 5 
 6 .left{
 7     float:left;
 8     text-align:center;
 9     background-color: lightpink;
10     width: 200px;
11     height:300px;
12 }
13 
14 .right{
15     background-color: lightyellow;
16     margin-left:200px;
17     height:300px;
18     padding-left:10px;
19 }

　6.2: Einseitige Fixierung mit unterschiedlichen DOM- und Displaypositionen

1         <div class="container">
2             <div class="right">右浮动+固定宽度</div>
3             <div class="left">左边自适应宽度+margin-right</div>
4         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: right;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10 }
11 .container .left {
12   background-color: lightyellow;
13   margin-right: 200px;
14   height: 300px;
15   padding-left: 10px;
16 }

Mit anderen Worten: Das HTML-Element befindet sich nicht an derselben Position wie das auf der Seite angezeigte Element.

　 6.3: Einseitige Fixierung von DOM und Display-Position an der gleichen Position

1         <div class="container">
2             <div class="left-content">
3                 <!-- 左浮动+width100% -->
4                 <div class="left">margin-right</div>
5             </div>
6             <div class="right">左浮动+固定宽度+margin-left负值</div>
7         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: left;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10   margin-left: -200px;
11   height: 300px;
12 }
13 .container .left {
14   background-color: lightyellow;
15   margin-right: 200px;
16   height: 300px;
17   text-align: center;
18 }

　6.4: Intelligentes Layout

Durch das sogenannte Smart-Layout muss die Breite der beiden Spalten nicht eingestellt werden und die Breite passt sich dem Inhalt an.

 1         <div class="container">
 2             <div class="left">
 3                 float+margin-right+自适应宽度
 4             </div>
 5             <div class="right">
 6                 display:table-cell  ---IE8+;
 7                 display:inline-block   ---IE7+;
 8                 自适应宽度
 9             </div>
10         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

Zusammenfassung wie folgt:

1: Wenn ein Element das Float-Attribut festlegt, blockiert es das Element.

2: Das Float-Attribut wurde ursprünglich für den Textumbrucheffekt erstellt.

3: Das Float-Element reduziert die Höhe des übergeordneten Elements.

4: Float-Elemente entfernen Leerzeichen, die durch Zeilenumbrüche verursacht werden.

5: Verwenden Sie Float, um ein zweispaltiges adaptives Layout zu erreichen.