2017-03-23 13 views
0

https://jsfiddle.net/0k02qsjw/1/なぜ非浮動子供は浮きません

.left1 { 

background-color:red; 
width:100px; 
height:100px; 
float:left; 

} 
.left2 { 

background-color:blue; 
width:100px; 
height:100px; 


} 

//左3 left4 left2に似て。フィドル

<div class="left1">Div1</div> 
<div class="left2">Div2child</div> 
<div class="left3">Div3</div> 
<div class="left4">Div4</div> 

私はフロートを学び、CSSでクリアして、1つの問題に固執しています。上記の例では、各divを個別に浮動させるとき、Floatは期待どおりに動作します。私がleft1を浮かべると、left2は予想どおりに動きます。しかし、なぜ左の子どもたちは上に動かないのですか?

浮動小数点型の要素が流れていないことを理解しています - その理由があるかもしれません。 もしそうなら、なぜleft2上に隠されたオーバーフローはleft2が浮かんだかのように機能します(下記参照)。
https://jsfiddle.net/0k02qsjw/2/

この場合、何が起こっているのか理解するのに助けが必要です。これは

Floating elements within a div, floats outside of div. Why?

の重複可能性がしかし、私はそこに私の特定の質問への答えを見つけることができません。

答えて

2

https://developer.mozilla.org/en-US/docs/Web/CSS/float

フロートCSSプロパティは、素子が通常の流れから取り出され、テキストとインライン要素がその周囲に折り返され、その容器の左側または右側に沿って配置されなければならないことを指定します。あなたは要素をフロートするとき

ので、他のブロック要素は、その周りに浮いていない - インラインやテキスト要素をその周りに隣接要素フロートに。

浮動小数点数が.left1の場合は、.left2のコンテンツは同じ幅であるため、.left1に上書きされません。 .left2は、.left1を囲むことができるように、インラインコンテンツとテキストコンテンツのために、.left1より広い必要があります。これはwidth.left2200pxに設定すると表示されます。 https://jsfiddle.net/0k02qsjw/3/

関連する問題