1

これは、マークアップとスタイルを使用して以前に持っていたものを単純化した例です。以前にも同様の質問をしたことがありますが、完全に理解できる回答が得られませんでした。なぜ私が仕事clear:bothをするために使わなければならないのかをよりよく説明するために、簡単な例を挙げることができpadding-topます. float私は本当に理解したいと思っていますclear。

したがって、私の質問は次のとおりです。この宣言を機能させるために宣言で使用clear:bothする必要がある理由をまだ理解できません#message

#message p 
{
    padding-top: 30px;
}

<!DOCTYPE>
<html>
  <head>
    <title>testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
      body 
      {
       text-align: center;
       width: 768px;
     }

     #register 
     { 
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
       list-style: none;
       color: #690;
       background: #BDDB62;
     }

     #message 
     {
      clear: both;
      text-align: center;
      background: #92B91C;
    }

    #message p 
    {
      padding-top: 30px;
    }
  </style>
</head>

<body>
  <div id="register">
    <p style="float:left">We float left</p>
  </div>

  <div id="message">
    <p>Paragraph after floated element</p>
  </div>
</body>
</html>
4

2 に答える 2

2

必要な理由clear:bothは、registerdiv がフローティングであり、 div がフローティングではないためです。したがって、ページのレイアウトにmessage従っているだけです。register

追加clear:bothすると、本質的にそのフローから抜け出し、通常どおり挿入されdivます。パディングは、少し下に移動して余裕を持たせることで、ケーキのアイシングです。

(うまくいけば、私はあなたの質問を理解しました...私はあなたのコードを実行する機会がありませんでした)。

于 2013-08-08T19:29:19.407 に答える
1

良い質問。まず、CSS 仕様の次の図を思い出してください: http://www.w3.org/TR/CSS2/images/boxdim.png。

「コンテンツ」ボックスは、最も内側のテキスト領域であることに注意してください。

float ルール ( http://www.w3.org/TR/CSS2/visuren.html#float-position ) は言う

フロート:左

この要素は、左にフロートするブロック ボックスを生成します。 コンテンツは、ボックスの右側に上から順に流れます (「クリア」プロパティに従います)。

http://jsfiddle.net/hBwD7/1/を見てみましょう。そこには3つのテストがあります。テスト 1 では、フロートが使用可能な幅の半分しかない場合に何が起こるかを示します。要素によってカバーされるmessage p領域が、float 要素の領域を囲むパディングを含む赤いボックスで示されていることを確認してください。パディングの観点からは、フロートはまったく存在しません。フロートの周りを流れるのはコンテンツだけだからです。

テスト 2 は、パディングを増やすと、最終的にコンテンツがフロートの下にドロップされることを示しています。

テスト 3 は、フロートの幅を 100% に増やしても状況が変わらないことを示しています。パディングの観点からは、フロートは存在しません。したがって、パディングは単純にフロートで覆われています。ただし、フロートはコンテンツを覆うことができないため、フロートのすぐ下に表示されます。

ただし、clear:both( http://www.w3.org/TR/CSS2/visuren.html#flow-control ) を追加すると、追加のルールが適用されます。

クリア:両方

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

の上部ボーダー エッジはmessage完全にフロートの下にある必要があります。ボーダー ボックスにはパディング ボックスが含まれているため、パディングはフロートの下から開始する必要があり、上部パディングの 30 ピクセルはテキスト コンテンツの上に表示されます。

于 2013-08-08T21:28:20.093 に答える