CSSフロートの説明

CSSフロートが私を夢中にしています。再現する方法CSSフロートの説明

は：clear:bothなしで動作しない理由だけ

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

から次のコードスニペットをコピー？

   <html> 
       <head> 
       <style type="text/css"> 
       .thumbnail 
       { 
       float:left; 
       width:110px; 
       height:90px; 
       margin:5px; 
       } 
       .text_line 
       { 
       display:block; 
       height:90px; 
       width:300px; 
       margin:0px; 

       background-color:red; 
       } 


       </style> 
       </head> 

       <body style="display:block"> 

       <h3>Image Gallery</h3> 
       <p>Try resizing the window to see what happens when the images does not have enough room.</p> 
       <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> 
       <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"> 
       <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"> 
       <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> 
       <p class="text_line">a</p> 

       <img class="thumbnail" src="klematis_small.jpg" width="107" height="90"> 
       <img class="thumbnail" src="klematis2_small.jpg" width="107" height="80"> 
       <img class="thumbnail" src="klematis3_small.jpg" width="116" height="90"> 
       <img class="thumbnail" src="klematis4_small.jpg" width="120" height="90"> 
       </body> 
       </html>

出典

2011-11-01 Xiaojun

期待どおりに動作するようです。あなたは問題が何であり、何を正確に達成しようとしているのか説明できますか？ – Nix

私には、あなたが何かを取り除いたことが本当に奇妙なようです（ 'clear：both;'）。そして、あなたはw3schoolの例のように動作しないのだろうかと思います。あなたが何かを削除したり交換したりすると、作業が中断されます。もしあなたがそれを元に戻す可能性があります。 – Joonas

[w3schoolsは悪い]（http://w3fools.com）、[floatutorial]（http://css.maxdesign.com.au/floatutorial/）は、おそらくより良いリソースです。浮き沈みについて学ぶ。 – You

、あなたはそう長くコンテナがあるとして、次の以前のFLOATEDオブジェクトにそれを配置するようにブラウザを言っているバック（.text_line中）でclear:bothを置きます（それ以外の場合は、前のオブジェクトの下にドロップされます）。

オブジェクトを浮動させると、本質的にオブジェクトフローから取り除かれます。浮動オブジェクトは親コンテナの一部ですが、ボックスモデルのスタイル（幅、高さなど）は親コンテナには計算されません。したがって、親コンテナに複数の浮動要素がある場合、浮動要素の高さが無視されるため、高さはゼロになります（高さが固定されていない場合）。

これを修正するには、フロートをクリアする必要があります。これは、基本的には注文が復元されることを意味します。

divをclear：both;親コンテナの一番下に置くか、親コンテナにこのclearfixクラスを置く：

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; }

これは残酷に簡潔に説明されています。フロートとクリアについての詳細はこちらhttp://dev.opera.com/articles/view/35-floats-and-clearing/

出典

2011-11-01 10:13:32 Nix

ちょうどあなたがブロック要素をフロートすると

出典

2011-11-01 09:54:12

実際に私がしたいのは、floatの仕組みですか？質問に関して、なぜ "a"が包含要素pの外に置かれているのですか？ – Xiaojun

答えて

関連する問題