HTML/CSS：不必要なタグを追加せずに途中のフローティング要素をクリアする

Question

クリアコンフィギュレーション技術のほとんどは、親コンテナの一番下に物を追加することを含み、私は擬似要素アプローチを好む不要な要素をHTMLに追加します。

しかし、最近私はいくつかの子供が浮かんでいるがすべてではない容器を扱っていることがわかりました。最初の2人の子供が左に浮かび、2人目が右に浮いていると言う。 2番目の要素の直後にfloatをクリアする方法が必要なので、以下の内容はそれらの間に挟まれません。途中でフローティング要素をクリアする方法はありますか？ただし、clearfix要素を追加することはありませんか？以下は

例です。

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; 
} 

私が今持っているものを見るために、このjsfiddleを参照してください。

Answer 1

はわずか3 ^RD要素にclear: both;を使用し、この方法、あなたはフローティング要素の後に<div style="clear: both;"></div>を使用する必要はありません。

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

またDemo

---

あなたは余分な要素を追加したり、汚れた方法がclear山車にあるoverflow: hidden;を使用せずに、親要素をクリアするために探しているときは常にあれば、あなたはclass上を呼び出すことができます以下のプロパティを持つ親要素。

たとえば

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

Answer 2

clear：both;第三子に役立ちます：

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

Answer 3

あなたはclear propertyを使用する必要があります。ご例えば

：jsfiddleで

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

。