浮动不按预期工作

Question

我有一个导航框,尽管浮动设置为正确,但"接触"元素并非完全右对齐.

<div id="navwrapper">
    <ul>
        <li class="single">Home</li>
        <li class="double" id="left">About</li>
        <li class="double" id="right">Contact</li>
        <li class="single">Book</li>
    </ul>
</div>

和CSS

#right {
    float:right;
}

其他问题似乎建议将左右元素交换以获得所需效果,但这不起作用.

的jsfiddle

Answer 1

你错过overflow:hidden了你的ul元素.

检查这个工作jsFiddle.

overflow:hidden建议在浮动元素的父元素上使用.它强制父母将所有这些包裹起来,从而防止你遇到的奇怪行为.