Question

div“ headerlinks ”浮动在div“标题”的左下方但如果我重新加载页面，div就在正确的位置。我不知道它是我的CSS还是浏览器bug。我正在使用Chrome 29.0.1547.62 (Official Build 219432) Mac OS X。

Demo

<div id="header">
    <a href="/">
    <img src="blackdiamondcraft.com/title.png" alt="Home"></a>
    <div id="headerlinks">
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a> 
        <a class="boxlink" href="/nothing">Nothing</a>
    </div>
</div>

CSS

.boxlink {
    background-color: #cccccc;
    border: solid #999999 1px;
    padding: 5px;
}
#header {
    background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842));
    background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
    border-radius: 10px;
    padding: 3px;
    border: solid 4px black;
    margin: 4px;
}
#headerlinks{
    float: right;
    padding: 10px;
    background-color: #66ffcc;
    position: inherit;
    border-radius: 7px;
    border: solid #000 1px;
}

Answer 1

您需要清除浮动广告，在父元素上使用overflow: hidden;

#header {
   background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-                     stop(100%,#91e842));
   background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%);
   border-radius: 10px;
   padding: 3px;
   border: solid 4px black;
   margin: 4px;
   overflow: hidden;
}

Demo

更好的方法是使用以下代码段

使用自清除父元素

.clear:after {
    clear: both;
    display: table;
    content: "";
}

Demo

说明：当您向左或向右浮动元素时，父元素会崩溃，因为它不知道您的父元素的height是什么，为了解决这个问题，您需要清除浮动元素我提供的上述解决方案除此之外，您还可以使用clear: both;，为了更好地理解，您可以参考我的回答here或here。

当我浮动时，CSS div浮动在父div之下：left

1 个答案: