game - css operator



Was ist der beste Weg, um den CSS-Stil "float" zu löschen? (9)

Das Problem besteht darin, dass sich die übergeordneten Elemente nicht an die Höhe der untergeordneten Elemente anpassen. Die beste Methode, die ich gefunden habe, besteht darin, das Elternelement zu float , um es mit den Höhen seiner floated child-Elemente zu justieren, und dann css clear auf das nächste Element anzuwenden, das Sie eigentlich löschen möchten. Es ist oft notwendig, die width:100% zu addieren width:100% auch, da ohne Änderung der Eltern das Layout unerwartet ändern kann.

Wie andere bereits erwähnt haben, ist es semantisch am besten, Markups zu vermeiden, die nichts mit Ihrem Inhalt zu tun haben, wie etwa ein <br> oder <div> mit einer Clearfix-Klasse.

https://src-bin.com

Ich bin es ziemlich gewöhnt, meine Schwimmer zu reinigen, indem ich <br style="clear:both"/> aber die Sachen ändern sich <br style="clear:both"/> und ich bin mir nicht sicher, ob dies die beste Übung ist.

Es gibt einen CSS-Hack (von positioneverything), mit dem Sie ohne das Clearing-Div das gleiche Ergebnis erzielen können. Aber ... sie behaupten, der Hack sei etwas veraltet und stattdessen sollten Sie sich diesen Hack anschauen. Aber ... nachdem ich 700 Seiten mit Kommentaren durchgelesen habe :) scheint es, dass es einige Orte gibt, an denen der letztere Hack nicht funktioniert.

Ich möchte alle Javascript-Hacks vermeiden, da ich möchte, dass mein Clearing funktioniert, unabhängig davon, ob JavaScript aktiviert ist.

Was ist die aktuelle bewährte Methode, um divs browserunabhängig zu löschen?



Answer #2

Einfach overflow:auto; hinzufügen overflow:auto; zu dem Elternelement, das die schwebenden Elemente enthält, ist in den meisten Fällen eine ausgezeichnete Lösung.

Beispiel HTML:

<div class="container">
    <div class="child">...</div>
    <div class="another-child">...</div>
<div>

CSS:

.child {
    float: right;
    word-wrap: break-word;
}

.child img {
    max-width: 100%;
    height: auto; /* of course, this is default */
}

.child p {
    word-wrap: break-word;
}

.container {
    overflow: auto;
}

Wie bei jeder anderen Methode gibt es einige Fehler mit overflow:auto; auch. Um sie zu beheben - wenden Sie max-width:100%; height: auto; max-width:100%; height: auto; für Bilder und word-wrap: break-word; für Text, der in den Floating-Elementen enthalten ist.

[ source ]


Answer #3

Es gibt ein bisschen Voodoo, das ich oft benutze.

<span class="clear"></span> 
span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

Diese Kombination löst auf magische Weise eine ganze Reihe von Browserproblemen, und ich habe es so lange benutzt, dass ich vergessen habe, welche Probleme es löst.


Answer #4

Ich habe festgestellt, dass am häufigsten (ich selbst eingeschlossen) diese Methode im HTML verwendet wird:

<div class="clear"></div>

Mit diesem im Stylesheet:

.clear {clear: both;}

Answer #5

jQuery UI hat auch einige Klassen, um das zu beheben ( ui-help-clearfix tut etwas).

Technisch <div style="clear:both;"></div> ist besser als <br style="clear:both;" /> <br style="clear:both;" /> weil ein leeres div 0 height hat und dadurch nur die floats gelöscht werden. Das <br /> wird ein Leerzeichen hinterlassen. Ich sehe nichts falsch mit der Verwendung der <div/> -Methode.


Answer #6
<br clear="all"/>

funktioniert auch gut. Der Vorteil gegenüber der Verwendung von class = "clear" ist, dass es einfach funktioniert und Sie müssen keine zusätzlichen Regeln in Ihrem CSS einrichten, um es zu machen.


Answer #7
<div class='float_left'>

something else


<br style="clear:both;">
</div>

Dieses Br wird kein Leerzeichen hinterlassen.


Answer #8
.floatWrapper {
   overflow:hidden;
   width:100%;
   height:100%;
}
.floatLeft {
   float:left;
}


<div class="floatWrapper">
    <div class="floatLeft">
        Hello World!
    </div>
    <div class="floatLeft">
       Whazzzup!
    </div>
</div>




css