Html 我还是不知道'；我不明白为什么我必须使用clear:两者

这里是一个简化的示例，我以前使用过标记和样式。 我以前也问过类似的问题，但还没有得到我完全理解的答案。 您可以举一个简单的例子来更好地解释为什么我必须使用

clear:both

，以使

填充顶部

起作用。 我确实想真正理解

float

和

clear

所以我的问题是： 我仍然不明白为什么我必须在

#消息

声明中使用

clear:both

，才能使该声明生效

#消息p
{
填充顶部：30px；
}

测试
身体
{
文本对齐：居中；
宽度：768px；
}
#登记册
{ 
浮动：左；
宽度：100%；
保证金：0；
填充：0；
列表样式：无；
颜色：#690；
背景#BDDB62；
}
#信息
{
明确：两者皆有；
文本对齐：居中；
背景：#92B91C；
}
#信息p
{
填充顶部：30px；
}
我们向左浮动
浮动元素后的段落

您需要

清除的原因：两者都是因为您的
register
div是浮动的，而您的
message
div不是浮动的，因此它将跟随
register
一起出现在页面的布局中

添加
clear：这两个
都会导致它基本上脱离该流，并像正常的
div
那样插入。填充物是蛋糕上的糖霜，它向下移动一点，给你一些空间

（希望我理解你的问题…我没有机会运行你的代码）。
好问题。首先提醒自己CSS规范中的这个图：

请注意，“内容”框只是最里面的文本区域

浮动规则（）说

浮动：左
元素生成一个浮动到左侧的块框。
内容在框的右侧流动，从顶部开始（以“清除”属性为准）

现在看一看。那里有三个测试。测试一显示当浮动宽度只有可用宽度的一半时会发生什么。请参见
message p
元素所覆盖的区域由红色框表示，其中包括填充，包围着float元素的区域。从填充的角度来看，浮动根本不存在。因为只有内容在浮动中流动

测试二表明，如果我们增加填充，最终内容将下降到浮动下

测试三表明，将浮动宽度增加到100%并不会改变情况。从填充的角度来看，浮动不存在。因此，填充物只是由浮子覆盖。但是，浮动不能覆盖内容，因此它显示在浮动的正下方

但是，如果您添加了
清除：两个
，（），则会应用附加规则：

清楚：两者都有
要求长方体的上边框边缘低于下边框边缘
导致的任何右浮动框和左浮动框的边缘
源文档中前面的元素

消息的顶部边框现在必须完全位于浮动下方，边框框包含填充框，因此填充必须从浮动下方开始，顶部填充的30px显示在文本内容上方。
请阅读以下内容：
本身允许吗？我认为它后面总是必须有
html
（对于HTML5），使它成为
。@RobbieJW-对，但没有声明它是HTML5，也没有声明它符合任何其他html规范。所以没有什么可以“允许”或“不允许”它。我们所能说的是，
将导致浏览器中出现怪癖模式。很好的解释。现在我真的明白了为什么我的例子会这样。