Question

我正在尝试修复现有HTML / CSS中的边距（使用CSS覆盖修复），并且我无法理解我正在使用的情况（归结为下面的代码）。

我想要的是：在第一个'div.floating'之上没有填充（由于某种原因来自'p.par'的填充 - 为什么？）。令我困惑的是：如果我删除div＃extra（或者如果'.floating-column'不浮动），填充就消失了。为什么？是否存在超出我理解范围的崩溃边际规则？

（另外，更改HTML不是一种选择。）

感谢您的帮助，和Manuela

ps：代码：

<!DOCTYPE html>
<html>
<head>
  <style>
html, body, div, p {
  border:0;
  margin:0;
  padding:0;
}

.container {
  width:960px;
  margin:0 auto;
  background-color: #ddd;
}
.container:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.floating-column {
    float:left;
    border: 1px dashed green;
}

.floating {
  width: 100%;
  float: left;
  border: 1px dotted black;
}

.par {
  margin: 10px;
  border: 1px solid red;
}
  </style>
</head>
<body>
  <div class="container">
    <div class="floating-column">
      <div id="extra">
        <div class="floating">first float</div>
        <div class="floating">another float</div>

        <p class="par">Cras nibh erat, tempor non sagittis ac, vulputate ac lectus. Praesent sed fermentum eros. Mauris sodales suscipit diam, a congue dui commodo ac. Sed convallis rutrum ligula, vitae sollicitudin nisl porttitor nec. Mauris tempor fringilla imperdiet. Pellentesque interdum, tellus nec venenatis venenatis, nisi nulla ultricies leo, tincidunt venenatis risus nisl ac dolor. Donec ante leo, elementum et faucibus tincidunt, dignissim lacinia libero. Suspendisse pharetra in augue in sodales. Etiam luctus dui blandit nisi dictum pretium.</p>
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

将clear:both css属性添加到p.par，例如：

.par {
  margin: 10px;
  border: 1px solid red;
  clear: both;
  display: inline-block;
}

它将清除float的{{1}}，否则它将从容器顶部取出边距。

点击 DEMO 。

Answer 2

我知道你不想改变你的html，但是你的浮动div之间有一个简单明了的div，问题就解决了

这里是修复的小提琴（我没有更改任何其他内容）：

http://jsfiddle.net/9bS5a/

<div class="floating">first float</div>
<div style="clear:both"></div>
<div class="floating">another float</div>

编辑：如果你想要填充正确，第二个浮点div下必须有另一个明确的div：

 <div class="floating">first float</div>
 <div style="clear:both"></div>
 <div class="floating">another float</div>
 <div style="clear:both"></div>

小提琴：http://jsfiddle.net/9bS5a/1/

这个主题可能有助于解释清楚工作的清晰度What does the CSS rule clear: both do?

Answer 3

通过不浮动前两个div，你得到了你想要的东西。无论如何，浮动一个宽度设置为100％的元素没有任何好处。

从文档流中删除浮动元素，尽管其他元素在某种程度上仍然可以避免它。（那是非技术语言！）

当前两个div浮动时，它们之后的未开启段落在它们下方滑动并且它的边缘向上突出，尽管它的文本为它们腾出空间。

Answer 4

你需要明确：上面都是

标签。像：

<div class="container">
<div class="floating-column">
  <div id="extra">
    <div class="floating">first float</div>
    <div class="floating">another float</div>
    <div style="clear:both"></div>
        <p class="par">Cras nibh erat, tempor non sagittis ac, vulputate ac lectus. Praesent sed fermentum eros. Mauris sodales suscipit diam, a congue dui commodo ac. Sed convallis rutrum ligula, vitae sollicitudin nisl porttitor nec. Mauris tempor fringilla imperdiet. Pellentesque interdum, tellus nec venenatis venenatis, nisi nulla ultricies leo, tincidunt venenatis risus nisl ac dolor. Donec ante leo, elementum et faucibus tincidunt, dignissim lacinia libero. Suspendisse pharetra in augue in sodales. Etiam luctus dui blandit nisi dictum pretium.</p>
  </div>
</div>

你可以找到这个http://jsfiddle.net/6U4UU/

或者你可以添加fload：left到.par类，如：

.par {
    margin: 10px;
    border: 1px solid red;
    float:left;
}

这种方式也解决了你的问题。点击http://jsfiddle.net/6U4UU/1/

Answer 5

'div＃extra'（0px）和'p.par'（10px）的最高边缘崩溃，使其在顶部达到10px。所以花车必须低于那个。

如果两个元素中的一个是浮点数（或者如果其中一个元素有边框），则边距不会崩溃，这就是为什么如果删除'div＃extra'并且float成为新的父元素，行为会改变的原因（或为'div＃extra'添加边框）。

如果边距不崩溃，则父级保持其0px的上边距，并且浮动紧随其后。 'p.par'保持10px的上边距，在这种情况下渲染在浮动下方。

如何摆脱浮动上方的上边缘？

5 个答案: