HTML/CSS: Floating-Elemente in der Mitte löschen, ohne unnötige Tags hinzuzufügen

Question

Die meisten Clearfix-Techniken beinhalten das Hinzufügen von Dingen ganz unten im übergeordneten Container, und ich bevorzuge den Pseudo-Element-Ansatz am meisten, da dies nicht der Fall ist Fügen Sie nicht benötigte Elemente in den HTML-Code ein.

Allerdings habe ich kürzlich festgestellt, dass ich es mit einem Container zu tun habe, in dem einige Kinder schweben, aber nicht alle. Sagen Sie den ersten beiden Kindern, dass die ersten Schwimmer übrig sind und der zweite Schwimmer nach rechts. Ich brauche einen Weg, um den Float direkt nach dem zweiten Element zu löschen, damit der Inhalt nicht dazwischen gequetscht wird. Gibt es eine Möglichkeit, Floating-Elemente in der Mitte zu löschen, ohne ein Clearfix-Element hinzuzufügen?

Unten ist ein Beispiel:

HTML

<div class="container"> 
    <div class="child"> 
     first child! 
    </div> 
    <div class="child"> 
     second child! 
    </div> 
    <div class="child"> 
     third child! 
    </div>  
</div> 

CSS

.container { 
    width: 200px; 
} 

.child:nth-child(1) { 
    float: left; 
    background: yellow; 
} 

.child:nth-child(2) { 
    float: right; 
    background: red; 
} 

.child:nth-child(3) { 
    background: blue; 
    color: white; 
} 

diese jsfiddle Bitte beachten Sie, um zu sehen, was ich jetzt habe.

Answer 1

Verwenden Sie einfach clear: both; auf dem 3 ^rd Element, auf diese Weise haben Sie nicht <div style="clear: both;"></div> nach dem Floats zu verwenden.

.child:nth-child(3) { 
    background: blue; 
    color: white; 
    clear: both; 
} 

Demo

---

Auch wenn, wann immer Sie suchen, um ein übergeordnetes Element zu löschen, ohne Hinzufügen eines zusätzlichen Element oder mit overflow: hidden;, die clear schwebt eine schmutzige Art und Weise ist, können Sie eine class rufen das Mutterelement, mit den Eigenschaften unter

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Zum Beispiel

<div class="wrapper clear"> 
    <div class="left_floated_div"></div> 
    <div class="right_floated_div"></div> 
</div> 

Answer 2

ein klares hinzufügen: beide; im 3. Kind hilft:

.child:nth-child(3) { 
    background: blue; 
    color: white; 
    clear:both; 
} 

Answer 3

Sie müssen die clear property verwenden.

Für Ihr Beispiel:

.child:nth-child(3) { 
    clear: both; 
} 

In jsfiddle.