Löschen eines schwebenden korrekt

Question

Ich beschäftige mich mit float: left; und dem CSS-Reset von Eric Meyer mit class="clearfix".Aber es gibt einen Sonderfall, ich frage mich, wie man ein floatd-Element richtig löscht: Innerhalb von <ul> ... </ul>.

Falsche Höhe des <ul> bei Verwendung eines Clearers.Der Klarer sollte sich innerhalb des <ul> befinden.Versuchen wir mal ...

Richtige Höhe, aber der HTML-Code ist ungültig !

Wie kann ich den Float im <ul> mit gültigem Code löschen?

Danke, Johannes

Answer 1

Fügen Sie einfach overflow: hidden zum Regelsatz des ul-Elements hinzu.Suchen Sie bei Google nach "Clearing Floats" oder nach "Stack Overflow" für andere Lösungen. In diesem Fall sollte dies jedoch die sauberste sein.

jsfiddle-Demo: http://jsfiddle.net/9sxrN/1/

Answer 2

Soweit ich weiß, kann float auf Blockelemente angewendet werden, die nicht in UL eingefügt werden können.(weder div noch BR können Sie nicht in UL einfügen).In der Tat können Sie, aber es ist nicht gültig.

Also habe ich deine ul mit div container bedeckt:

<div class="ul-container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>

und css von ul ein gemachtes css von .ul-container

.ul-container {
    border: 2px solid red;
}

ul li {
    float:left;
    background: #ccc;
    margin: 5px;
}

Answer 3

Verwenden Sie overflow:hidden; für den ul