0

clear bothのタグが一番下にあるのはなぜですか。<h1>「clear both」を取り除くと正常に動作します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gbk"/>
<style>
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    margin-left:210px;
    background:#f9c;
    height:400px;
}
h1{
    clear:both;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="main">
    <h1>test</h1>
</div>
</body>
</html>
4

3 に答える 3

1

あなたの質問：

1- 両方クリアのタグが一番下にあるのはなぜですか?

のCSS仕様にclearよると：

both
ボックスの境界線の上端が、ソース ドキュメント内の以前の要素から生成された右フローティング ボックスおよび左フローティング ボックスの外側下端よりも下にある必要があります。

そのため、clear:both;onは以前の要素のフロートもクリアしますが、これh1は.divh1

2-どうすれば両方をクリアして動作させることができますか?

継続してコンテナの先頭に保持clear:both;する必要がある場合、最も簡単な方法はコンテナに追加することです。h1divoverflow:auto;

デモ

#main {
    margin-left:210px;
    background:#f9c;
    height:400px;
    overflow:auto;
}
于 2013-05-14T06:57:06.677 に答える
0

それは機能するはずです。影響を受けるレイアウトは H1 のものです。メインのレイアウトではありません。W3c は次のように述べています。「clear プロパティは、要素のボックスのどの辺が以前のフローティング ボックスに隣接していない可能性があるかを示します。」

したがって、H1 は制約を達成するまで下がります。 H1 が main div の子であることは問題ではありません。制約も達成する必要があります。

ここに画像の説明を入力 したがって、(何らかの理由で) H1 の両方に clear を適用すると同時に、以前のフローティング ボックスに関連する制約を回避する必要がある場合は、 main を絶対位置に配置する必要があります。包含ブロックも必要になるため、相対位置に div コンテナーを追加しました

このフィドルでここで動作しているのを見ることができます

#container {
position:relative;
}
#left{
    float:left;
    width:200px;
    height:400px;
    background:#cfc;
}
#main{
    position:absolute;
    left:210px;
    right:0px;
    background:#f9c;
    height:400px;

}

h1{
    clear:both;    
}
于 2013-05-14T06:55:22.083 に答える