Question

我没有代码来展示我的问题，但我从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，而不是一个清除浮动图像下的段落，在这种情况下，甚至相对定位以增加边距也不起作用。

确切地说，确定应用它的元素如何与文档的其余部分一起流动？我知道什么是明确的DOES。我知道它说哪个方面没有以前浮动的物体可以开启，但它对元素ITSELF有什么作用？清除的元素是否以某种方式附加到与浮动元素相同的流中？

Answer 1

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

Answer 2

clear属性指定元素框的哪些边不能与浮动元素相邻，只有当这些浮动元素位于相同的块格式化文本时才会这样做。

来自SitePoint：

清算会在清除元素的上边距上方添加空格，直到它为止清除受影响的浮动箱子。结果，我们不能使用顶部如果我们想要特定数量的空间，则清除元素上的边距它与浮动的盒子之间。

尝试在浮动元素之后放置尚未清除的其他元素将基本上保留在相同的上下文中。这只需要浮动工作的方式。

如果你想在图像和段落之间插入空行，我会在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 个答案: