2

これが私のjsFiddleです

3div秒しかありません。2nddivは右に浮かび、3rddivは2ndの真下に出現。

3 番目divでは、プロパティを設定margin-topしていますが、このプロパティはレイアウトには影響しません。

質問: float のこの動作を理解する方法を説明してもらえますか?

HTML

<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>

CSS

.header {
    width: 100%;
    height: 80px;
    background-color: #abcdef;
}

.sidebar {
    margin-top: 15px;
    float: right;
    width: 200px;
    height: 200px;
    background-color: #abcdef;
    display: block;
}

.footer {
    clear: both;
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background-color: #000000;
}
4

4 に答える 4

1

この問題は、明確なルールに関連しています。

W3C - クリアランスが適用された要素は、親ブロックの下マージンで上マージンを折りたたむことはありません。

基本的に、クリアを使用する場合、一般的なルールは、2 つのフローティング div の間に要素を追加して、それらを正しく配置できるようにすることです。

于 2013-05-15T15:37:05.407 に答える
0

これは、マージンの計算に関して浮動要素が実際には存在しないという事実が原因です。.footer は、その上にある unfloated 要素の下にあります (20px のマージンがあります)。この問題は、float に関するマージンが他の float と比較して計算されるために発生します (他のすべての要素ではありません)。したがって、目的の効果を得るには、margin-bottom 要素を .sidebar に追加するか、意味のない float を .footer に追加するか、

<div style="clear:both"></div>

.footer と .sidebar の間

于 2013-05-15T15:37:06.337 に答える