CSSのオーバーフロー：浮動小数点で隠されています

Question

following code on w3schoolsを読みましたが、overflowのプロパティがテキストがulの右側に表示されるかどうかには影響しません。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    width: 60px; 
 
    background-color: #dddddd; 
 
    padding: 8px; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

私はoverflow:hiddenが箱の外に出た内容を処理するために使用されていることを知っているが、それは、この場合に適用されるかを理解していません。

Answer 1

私は混乱を終了しよう：

ulはブロックレベルの要素で、p要素です（親幅の100％に伸びます）。そのため、デフォルトではpがulの下に表示されるのは、これらの要素で幅や表示が宣言されていない場合です。

あなたの例では、ulに浮動要素のみが含まれています。これにより、高さが0pxになります（この例では100％の幅があります）。隣接するpは、浮動小数点の右側に表示されます。これは、浮動小数点の浮動小数点数と見なされるためです（li）。

今宣言overflow（visible以外の任意の値）はulはその子が含まれています新しいblock formatting contextを確立します。突然、ulが「再現」し、サイズは0pxではなくなりました。 pが下部に押し込まれています。また、ulが通常の要素フローから取り出されるという副作用を伴い、pがulによってオーバラップされるという、同じ「クリアリング」効果を実現するようにposition:absoluteを宣言することもできます。あなたが技術的なものにしている場合）

See the example fiddle

、CSS仕様の応じて段落を比較：

§10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
と §10.6.7 'Auto' heights for block formatting context roots
。 （リンクを掘り下げるBoltClockに感謝します）。同じではありません

ul{ 
 
    list-style-type:none; 
 
    margin:0; padding:0; 
 
    background-color:#dddddd; 
 
    border:2px solid red; 
 
} 
 
li{ 
 
    float:left; 
 
} 
 
a{ 
 
    display:block; 
 
    width:60px; 
 
    background-color:#555; 
 
    color:white; 
 
} 
 
p{ 
 
    margin:0; 
 
    outline:2px dotted blue; 
 
} 
 
#two{ 
 
    clear:both; 
 
    overflow:hidden; 
 
}

No overflow: 
 
<ul> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats </p> 
 
<br> 
 
With overflow: hidden 
 
<ul id="two"> 
 
<li><a href="#home">Home</a></li> 
 
<li><a href="#news">News</a></li> 
 
<li><a href="#contact">Contact</a></li> 
 
<li><a href="#about">About</a></li> 
 
</ul> 
 
<p>the ul reappeared - it now contains the child li's - the float is cleared</p>

Answer 2

overflow:hidden;の代わりに、<p>の場合はclear:both;を使用してください。ここでは使用中ですhttp://jsfiddle.net/Mvv8w/。基本的にoverflow:hiddenは、clear:both;のように何かをクリアします。

Answer 3

要素にoverflow: hiddenを設定すると、新しい浮動小数点コンテキストが作成されるため、overflow: hiddenが適用された要素の内部で浮動する要素はクリアされます。

http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 4

W3Schoolsのは、Webデザイナー/開発者のための信頼できる情報源ではない理由です。あなたは正しいです、それはひどい例です。

これは、この例では、親要素に固定値がないためではありません。さらに、それは無秩序なリストタグであり、それは子供のサイズに関係なく伸びます。

http://jsfiddle.net/EhphH/

CSS

.parent { 
    width: 150px; 
    height: 100px; 
    padding: 10px; 
    background: yellow; 
    overflow: hidden; 

} 
.child { 
    float: left; 
    width: 75px; 
    height: 120px; 
    margin: 10px; 
    background: blue; 

} 
.baby { 
    width: 200px; 
    height: 25px; 
    background: green; 
} 

マークアップ

<div class="parent"> 
    <div class="child"> 
     <div class="baby"> 
     </div> 
    </div> 
    <div class="child"> 
    </div> 
</div>