如果clear:both;声明中有#message，那么padding-top:30px;中就有#message p
clear:both声明是正确的，但如果我删除了中的#message
padding-top:30px;声明然后clear:both生效。
那么为什么我需要在#message声明中padding-top才能使用#message p
body {
margin: 5px;
padding: 0;
font-family: Arial, sans-serif;
font-size: small;
text-align: center;
width: 768px;
}
#register {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
color: #690;
background: #BDDB62;
}
#register a {
text-decoration: none;
color: #360;
}
#reg {
float: left;
margin: 0;
padding: 8px 14px;
}
#find {
float: right;
margin: 0;
padding: 8px 14px;
}
#message {
clear: both;
font-weight: bold;
font-size: 110%;
color: #fff;
text-align: center;
background: #92B91C;
}
#message p {
margin: 0;
padding-top: 30px;
}
#message strong { text-transform: uppercase }
#message a {
margin: 0 0 0 6px;
padding: 2px 15px;
text-decoration: none;
font-weight: normal;
color: #fff;
}
声明中的<ul id="register">
<li id="reg">Not registered? <a href="#">Register</a> now!</li>
<li id="find"><a href="#">Find a store</a></li>
</ul>
<div id="message">
<p>
<strong>Special this week:</strong> $2 shipping on all orders!
<a href="#">LEARN MORE</a>
</p>
</div>
。
CSS
{{1}}
HTML
{{1}}
答案 0 :(得分：0)
为什么要浮动register元素？如果它有100％的宽度是没有意义的，它会导致你遇到的问题。在不清除以下元素的情况下，段落上的填充会在浮动元素下向上滑动。
答案 1 :(得分：0)
因为#register有float:left;，所以它不属于流量的一部分。这意味着您的#message元素从body的顶部开始，只有其内容被推送到#register的底部。现在，p顶部的填充在#message 后面有足够的空间 #register。
clear:both;强制#message从它的两边都没有任何东西开始，甚至不是浮动元素，所以它从#register的底部开始，你的填充没有得到背后。
答案 2 :(得分：0)
您的密码：#register {float:left;}
永远不要使用float:left;，因为它会影响IE中的某些时间。相反，您使用display:inline-block或overflow:hidden。它将使您的代码更好地适用于所有主流浏览器。