css - 上线 float

Question

我想要在我的网站的上部有一个全屏栏，在左侧和右侧有一个列表(任何元素)。为什么这不起作用？

#upperline{
background:brown;
width:100%;}

#upperline ul{
float:left;}

#upperline p{
float:right;}


<div id="upperline">

    <ul>
        <li>our team</li>
        <li>help</li>
        <li>contact</li>
    </ul>
    <p>log in</p>

</div>

我很困惑

Answer 1

在 float 元素的父元素上放置一个overflow:hidden; 以使其工作

See it here

#upperline{
background:brown;
width:100%;
overflow: hidden;}

来自 this post并适应你的情况:

div is a block-level element (they stretch to 100% of the parent width).

Now in your example the div contains only floated elements. This makes it collapse to a height of 0px (It still has 100% width though as you can see in the example).

Now declaring overflow (any value other than visible) establishes a new block formatting context, which makes the div contains its children. Suddenly the div "reappears", not having size 0px anymore.