css布局问题

Question

如代码所示，为什么增加高度会把黄色区域顶到aside下面？

http://runjs.cn/code/df8chxwp

<div style="height: 100%">
    <header>
        <nav>
            <div class="nav-wrapper">
                <a href="#">LOGO</a>
                <ul>
                    <li>123</li>
                    <li>123</li>
                    <li>123</li>
                </ul>

            </div>
        </nav>

    </header>

    <div class="main">
        <aside>
            aside
        </aside>

        <div class="content">
            <p>
                123
            </p>
            <p>
                123
            </p>
            <p>
                123
            </p>
            <p>
                123
            </p>
            <p>
                123
            </p>

        </div>


    </div>
</div>

.nav-wrapper {

    position: relative;
}

nav ul li {
    float: left;
    height: 10px;//为什么增加高度会把黄色区域顶下去？
}

nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

aside {
    width: 10%;
    display: inline-block;
}

.main {
    width: 100%;
    height: 500px;
    background-color: #7deeff;

}

.content {
    background-color: yellow;
    width: 85%;
    display: inline-block;
    letter-spacing: normal;
    padding: 0 10px;
    vertical-align: top;
    word-spacing: normal;
}

.content p {
    width: 20%;
    float: left;

}

Answer 1

因为你的li高度超出了把.content挤下去了呀...最重要的是你没有清除浮动,所以你的.nav-wrapper是没有包裹住float:left的li元素的...要解决问题就去清除浮动吧.

.nav-wrapper {

    position: relative;
    overflow:hidden;

}

或者

<div class="nav-wrapper">
    <a href="#">LOGO</a>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <div style="clear:both;"></div>
</div>