1

如果我clear:both;在#message声明中有，那么padding-top:30px;在 #message p声明中将是正确的，但如果我clear:both在
#message声明中删除，则padding-top:30px;不会生效。那么为什么我需要clear:both在#message声明中才能 padding-top在#message p声明中使用。

CSS

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;
}

HTML 

<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>
4

3 回答 3

0

因为#register它float:left;不是流程的一部分。这意味着您的#message元素从 顶部开始，body只有其内容被推送到底部#register。现在你顶部的填充在后面p有足够的空间。#message #register

clear:both;强制#message从它两侧没有任何东西的地方开始，甚至没有浮动元素，所以它从底部开始，#register并且你的填充不会落后于它。

于 2013-08-08T12:24:20.450 回答
0

为什么要浮动register元素？如果它有 100% 的宽度是没有意义的，它会导致你遇到的问题。在不清除以下元素的情况下，段落上的填充会在浮动元素下方向上滑动。

于 2013-08-08T12:20:23.690 回答
0

您的代码： #register {float:left;}

永远不要使用float:left;，因为它会影响 IE 中的一些时间。相反，你使用display:inline-blockor overflow:hidden。它将使您的代码更适合所有主要浏览器。

于 2013-08-08T12:29:41.677 回答