0

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

<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 有什么作用？清除的元素是否以某种方式附加到与浮动元素相同的流？

4

2 回答 2

0

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

于 2012-05-29T02:25:55.277 回答
0

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

从站点点：

清除会在已清除元素的上边距上方添加空间，直到它清除受影响的浮动框。因此，如果我们想要在它和浮动框之间留出特定数量的空间，我们就不能使用已清除元素的上边距。

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

如果您想在图像和段落之间放置空白行，我会在 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/

于 2012-05-29T03:13:50.213 回答