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;
,为了更好地理解,您可以参考我的答案here或here。关于html - 当我 float 时,CSS div float 在父div下方:left,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18669764/