Question

我们有一个带静态定位的div。在里面我们有一个带边距的段落。 div的高度将是没有边距的段落
我们有一个带浮动的div：left。在里面我们有一个带边距的段落。 div的高度将是段落加上其边距。

对此有何解释？

这是html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="nivel1">
<div id="nivel21">
    <p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
    <p>Este es el primer parrafo</p>
</div>
</div>

</body>

</html>

CSS代码：

body {
    margin:0;
    padding:0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:2em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:2em;
    background-color:#FC0;
}

这是测试网站的link。

Answer 1

经过多次编辑后，我想我现在已经得到了答案：）

我也经历过这种令人费解的行为。我认为部分解释是在section 10.6.7 of the CSS2.1 spec：

在某些情况下（参见例如上文第10.6.4和10.6.6节），元素的高度   建立块格式化上下文的计算方法如下：

如果它只有内嵌级别的子级，则高度是顶级之间的距离   最顶部的线框和最底部的线框底部。

如果它有块级子级，则高度是上边距之间的距离   最顶层的块级子框和最底部块的底部边缘 -   水平儿童盒。

那些＆＃34;某些情况＆＃34;第10.6.6节中列出的包括浮动元素。

问题中的#nivel21元素是浮动元素，它包含块级子元素（），因此应用了这种特殊情况规则并且{{1使用<div>标记的上边距和下边距计算。

其次，this page about collapsing margins可能会提供一个线索，说明为什么的高度不包含#nivel22标记的边距：

p元素上的[...] margin-top实际上成为div元素的上边距，并将div推向页面[...]

标记有一个隐式边距（我的测试中为10px），需要使用外部元素的2em边距折叠，因此浏览器假装{{{ 1}}标记根本没有边距（它会将其放在#nivel1上），这意味着的高度会缩小到#nivel22标记的行高。

我希望这个答案对我以外的人有意义！

Answer 2

我认为当你使用float属性时，浏览器会将要显示的元素填充为浮动。

Answer 3

好吧，既然没有问题也没有明确的元素命名，我只假设您想在容器中放入2列。通过更清晰的命名和类的使用来清理代码会产生以下结果：（希望这是你要找的）

<html>
  <head>
    <title>divs</title>
    <style>
      .container{
      float: left;
        background-color: #0F3;
      }
      .column {
        margin: 2em;
        float: left;
        padding: 5px;
      }
      #lefty{
        background-color: #C00;
      }
      #righty{
        background-color: #FC0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="lefty" class="column">
        <p>Column number 1</p>
      </div>
      <div id="righty" class="column">
        <p>Column number 2</p>
      </div>
    </div>
  </body>
</html>

Answer 4

这是因为两个div的相互作用。移除浮动的，静态的将收缩。发生的是，浮动div将静态div中的文本向下推，从而扩展它。

更多评论：段落标记与此无关。您可以通过删除段落边距并增加元素本身的边距来实现相同的效果。无论哪种方式，静态定位元素都会增长而浮动元素则不会增长。这个CSS同样如此：

body {
    margin:0;
    padding:0;
}

p {
    margin: 0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:5em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:5em;
    background-color:#FC0;

}

CSS - 保证金和浮动财产

4 个答案: