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 是浮动的，而您的messagediv 不是浮动的，因此它只会register在页面布局中跟随。

添加clear:both将导致它基本上脱离该流程并像正常一样插入div。填充物是蛋糕上的糖霜，它向下移动一点，给你一些空间。

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

于 2013-08-08T19:29:19.407 回答
1

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

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

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

向左飘浮

该元素生成一个向左浮动的块框。 内容在框的右侧流动，从顶部开始（受“清除”属性的影响）。

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

测试二表明，如果我们增加填充，最终内容会下降到浮动下方。

测试三表明，将浮动的宽度增加到 100% 不会改变任何事情。从填充的角度来看，浮动不存在。所以填充只是被浮动覆盖。浮动虽然不能覆盖内容，所以它立即出现在浮动下方。

但是，如果您添加clear:both, ( http://www.w3.org/TR/CSS2/visuren.html#flow-control )，则适用附加规则：

明确：两者

要求框的上边框低于源文档中较早元素产生的任何右浮动和左浮动框的底部外边缘。

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

于 2013-08-08T21:28:20.093 回答