子どもたちの中にCSSが両方ともクリアする

Question

私はこの問題で長年問題を抱えています。私はそれがフロートレイアウトにとって非常に一般的な問題であると信じています。誰かが「標準的な」ソリューションを提供したいと考えています。

タイトルとして、問題はネストされた浮動小数点数です。以下のシンプルなレイアウトを考えてみましょう：

<div class='parent clearfix'> 
    <div id='child1' style='float:left; width:500px'> 
     { ... child 1 content goes here ... } 
    </div> 
    <div id='child2' style='margin-left:501px;'> 
     { ... child 2 content goes here ... } 
    </div> 
</div> 

ここclearfixは、オートクリア浮かべ子供のための一般的な技術です。問題は、子2に別ののclearfix要素が含まれていると、レイアウトが壊れてしまうことです。例えば、子供2コンテンツがある場合：

<div class='inside clearfix'> 
    <div class='sub1' style='float-left; width:100px'> 
     { ... extra content goes here ... } 
    </div> 
    <div class='sub2' style='margin-left:101px'> 
     { ... extra content goes here ... } 
    </div> 
</div> 

ので、一般的に、我々は明確な使用する場合：両方浮かべレイアウト（非浮かべ要素内）の内側に、それはまた、親コンテナをクリアします。

私は絶対位置とjsのビットを使用する場合、それを行う方法を知っていますが、それは良い方法ではありません。

floatを使用して修正する方法はありますか？

ありがとうございます！

Answer 1

また、overflow：hiddenも使用できます。この方法jsfiddle

Answer 2

浮動小数点数を扱うとき、私はclass divで余分なdivを使用するより簡単な方法に従います。これははるかに簡単で、理解しやすく、エラーが起こりにくいです。続き

は、私が何をすべきかです：

.clear { clear:both; overflow:hidden; } 

をあなたがこのアプローチを試みることができると私は物事が良いうちペインと確信しています：

CSSで

<div class="parentClass"> 
    <div class="float1"> 
    . . . 
    </div> 
    <div class="float2"> 
    . . . 
    </div> 
    <div class="clear"></div> 
</div> 

、明確なクラスは、次のようなものです。運が良かった！