cssフローティングの各方法のクリア

(1)空ラベル法:
この方法は最も簡単な方法と言えるでしょう.W 3 Cは容器の末尾に「clear:both」の要素を追加し、容器にその高さに適応させてすべてのfloatを簡単に詰めることを提案しています.どのようなラベルを使用するかは制限されていません.
のもの、空のものがあります.例えば、
  
 

<div> <div style ="float:left; width:40%;"> <p> Some content </p></div> <p> Text outside the float </p> <div style ="clear:both;" ></div> </div>

(2)親要素がoverflowを使用する方法:
親要素overflow値をhiddenまたはautoに設定します.ただし、<=IE 6でこの方法を使用するにはhaslayoutが必要です.また、overflow=hiddenを使用する場合、位置決めのニーズがあると実現しにくくなる可能性があります.この方法を使用する前に、少なくとも決定する必要があります.
a.親要素のheightは適応的である.
b.フローティング要素の幅は親要素の幅より大きくなく、すなわちオーバーフロー需要がない.だから、この方法にも限界があります. 

<div style ="overflow:hidden; width:100%;"> <div style ="float:left;width:30%;" > <p>the widths of the combined floats never exceed the width of the container</p> </div> </div>

(3)擬似クラス:after
この方法は現在最も広く応用されている方法と言えるべきで、その優位性:容器に余分なマークが追加されていない;使用:afterによって生成されたcontentは、「position」、「float」、リスト属性、テーブル属性など、いくつかの属性を受け入れることはできませんが、clear属性は受け入れられます.
しかし、残念なことに、IEはafterメソッドをサポートしていませんが、幸いなことに、前を振り返ると、IEが親容器にWidth/Heightなどのlayoutを持っている状態で、自動閉鎖が完了し、「auto-clearing」と呼ばれています.では、IE/winについては、zoom:1を設定方法を用いて、afterと同様の効果を実現する.
このようなスタイルが現れました

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}

<div class="clearfix"><div style ="float:left;width:30%;" ><p>take :after</p></div> </div>