Question

以下是我之前使用标记和样式的简化示例。我以前曾问过类似的问题，但没有收到我完全理解的答案。您可以举一个简单的示例来更好地解释为什么我必须使用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>

Answer 1

您需要clear:both的原因是您的register div是浮动的，而您的message div没有浮动，因此它只会跟随register在页面布局中。

添加clear:both会导致它基本上脱离该流并以普通div方式插入。填充是锦上添花，通过向下移动一点来给你一些空间。

（希望我理解你的问题......我没有机会运行你的代码）。

Answer 2

好问题。首先从CSS规范中提醒自己这个图：http://www.w3.org/TR/CSS2/images/boxdim.png。

请注意，“内容”框只是最里面的文本区域。

浮动规则（http://www.w3.org/TR/CSS2/visuren.html#float-position）说

浮动：左

该元素生成一个浮动到左侧的块框。   内容会在框的右侧流动，从顶部开始（以'clear'属性为准）。

现在看一下http://jsfiddle.net/hBwD7/1/。那里有三个测试。测试一，显示当浮动只是可用宽度的一半时会发生什么。看到message p元素覆盖的区域由红色框表示，其中包括填充，围绕浮动元素的区域。从填充的角度来看，浮子根本不存在。因为只有内容围绕浮动流动。

测试二显示，如果我们增加填充，最终内容将在浮动下降。

测试三表明，将浮动宽度增加到100％不会改变事物。从填充的角度来看，浮子不存在。因此，填充物仅由浮子覆盖。虽然浮动，但不能覆盖内容，因此它会立即出现在浮动之下。

但是，如果您添加clear:both，（http://www.w3.org/TR/CSS2/visuren.html#flow-control），则会应用其他规则：

明确的：既

要求盒子的顶部边框边缘位于底部外侧下方   任何右浮动和左浮动框的边缘   源文档中较早的元素。

message的上边框边缘现在必须完全位于浮动下方，边框包含填充框，因此填充必须从浮动下方开始，顶部填充的30px显示在您的上方文字内容。

我仍然不明白为什么我必须使用明确：两者

2 个答案:

浮动：左

明确的：既