清除元素不会向下移动？答案

【问题标题】：Cleared Element Won't Move Down?清除元素不会向下移动？
【发布时间】：2012-06-03 06:41:49
【问题描述】：

我没有代码来显示我的问题，但我从 w3schools 网站上提取了一些代码。这是他们给你的一个例子，让你玩 clear。

<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

我的问题是关于使用 clear 属性。为什么你不能将清除的元素向下移动到离它之前的浮动元素更远的地方？

意思是说，无论出于何种原因，我都希望在文本段落和该图像之间有几个空白行。分页符似乎不起作用。

如果我在段落中添加相对定位并给它一个更大的上边距，这可行，但在我不再需要向您展示的示例中，它是浮动 div 下的已清除 div，而不是已清除浮动图像下的段落，在这种情况下，即使是相对定位来添加边距也不起作用。

确切地说，clear 对您应用它的元素如何与文档的其余部分一起流动有什么作用？我知道什么是明确的。我知道这是在说没有以前的浮动对象可以在哪一边，但它对元素 ITSELF 有什么作用？清除的元素是否会以某种方式附加到与浮动元素相同的流？

【问题讨论】：

标签： css css-float positioning

【解决方案1】：

clear 属性指定元素框的哪些边不能与浮动元素相邻，并且仅当这些浮动元素在相同的块格式化上下文中时才会这样做。

从站点点：

清除在已清除元素的上边距上方添加空间，直到它清除受影响的浮动框。结果，我们无法使用顶部如果我们想要特定数量的空间，则清除元素上的边距在它和浮动框之间。

尝试在浮动元素之后放置其他尚未被清除的元素将基本上将它们保留在相同的上下文中。这与浮动的工作方式有关。

如果你想在图片和段落之间添加空行，我会在 img 元素中添加一个 margin-bottom：

<style type="text/css">
img
{
  float: left;
  margin-bottom: 10px;
}
p.clear
{
  clear: both;
}
</style>
</head>
<body>

<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

我可以继续说下去，但我想这会告诉你关于浮动和 CSS clear 属性你需要知道的一切： http://reference.sitepoint.com/css/floatclear

在这一点上，我强烈建议不要使用 w3schools，因为众所周知它们的信息有误。看： http://w3fools.com/

【讨论】：

啊，这就是我正在寻找的关于如何清晰更改对象的信息，非常感谢！！！

【解决方案2】：

只是在段落前面有一个<br class="clear" />，或为其添加上边距。

【讨论】：

他还需要更改他的选择器，因为它专门针对 p 元素。
我没有在我的网站上使用此代码。这是 w3schools 网站上的代码。我使用的代码使用了两个 div，而不是一个图像和一个段落。在本例中使用上边距对段落有效，但在我使用的使用两个 div 的代码中，上边距没有任何作用，相对定位更远没有任何作用。 clear 属性如何影响应用它的元素的定位方式？