div“ headerlinks”浮动在div“ header”的左下方
但是,如果我重新加载页面,则div位于正确的位置。我不知道它是我的CSS还是浏览器错误。我正在使用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;
}

最佳答案

您需要清除浮动信息,在父元素上使用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;,为了更好地理解,您可以参考我的答案herehere

关于html - 当我 float 时,CSS div float 在父div下方:left,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18669764/

10-11 22:29
查看更多