HTML：なぜ子どもが幅の合計が親の幅に等しいときに浮動小数点が必要ですか

Question

申し訳ありません私の質問が重複している場合は、適切な検索リクエストを選択できませんでした。

したがって、<div>には2つのインラインブロックの子があり、いずれもwidth: 50%です。親にはoverflow: hidden、子供にはfloat: leftを設定しないと、子供は親の中に1つの行を形成しません。

なぜですか？なぜ50％+ 50％が1行に等しくないのですか？なぜフロートが必要なの？

Answer 1

あなたはchlidrenノード間の空白があるため、最も一般的なシナリオは次のとおりです。

#container{ 
 
    background: red; 
 
    height: 50px; 
 
} 
 
#container div{ 
 
    width: 50%; 
 
    display: inline-block; 
 
    background: green; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

をソリューションは空白を削除することです：

#container{ 
 
    background: red; 
 
    height: 50px; 
 
} 
 
#container div{ 
 
    width: 50%; 
 
    display: inline-block; 
 
    background: green; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div></div><!-- 
 
    --><div></div> 
 
</div>

二最も一般的なシナリオが原因通常のブラウザで見プリセットmarginにある：margin: 0と

#container{ 
 
    background: red; 
 
    height: 50px; 
 
} 
 

 
#container div{ 
 
    width: 50%; 
 
    display: inline-block; 
 
    background: green; 
 
    height: 100%; 
 
    margin: 8px; /* browser default */ 
 
}

<div id="container"> 
 
    <div></div><!-- 
 
    --><div></div> 
 
</div>

オーバーライドそれはそれを修正します。

Answer 2

スペースもまた存在するためです。浮動小数点数を使用したくない場合は、htmlタグ間のスペースをコメントアウトするか、親にfont-size：0pxを設定してから子供に返すという2通りの選択肢があります。