元素没有高度

Question

我想用CSS3写个下拉的组件

<nav>
    <ul>
        <li><a href="">主页</a></li>
        <li><a href="">新闻</a></li>
        <div class="dropdown">
            <li><a href="">下拉菜单</a></li>
            <div class="dropdown-content">
                <ul>
                    <li><a href="">链接1</a></li>
                    <li><a href="">链接2</a></li>
                    <li><a href="">链接3</a></li>
                </ul>
            </div>
        </div>
    </ul>
</nav>

body{
    margin: 0px;
    padding: 0px;
}
nav{
    background: rgb(51, 51, 51);
    height: 60px;
}
nav ul li{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
nav ul{
    padding: 0px;
    margin: 0px;
}
nav>ul>li>a, .dropdown>li>a{
    color: white;
    font-size: 20px;
    text-decoration: none;
    display: inline;
    line-height: 60px;
    float: left;
    margin-left: 40px;
    text-align: center;
    width: 80px;
}
.dropdown{
    position: relative;
}
.dropdown-content>ul>li>a{
    color: black;
    font-size: 20px;
    text-decoration: none;
}
.dropdown-content{
    position: absolute;
    top: 60px;
    right: 0px;
}

为什么<a>有高度，<li><ul>都没有高度？DOM不会根据里层的元素确定外层元素的宽高吗？

Answer 1

float会导致父元素坍塌，具体原理可以看看张鑫旭大神的博客(慕课网上也有，深入理解系列)

Answer 2

ALASUAAGCCJIUWFSSBXIKJKCFYIDITYDQGMMYJCVDALRIBVENDQGNONEDPNNWTWOOKHJJSYYRSXZXAXNTWDMOTGPSQDAMLTWWZPAHWIQJZFAGNIRPSCSECDVUMZSFOZAVMYOHQDEVUGVLLOKAIAFAAGAJUFNCEXQTMPKJRAXEUOBCOYNGNDCBSEMDMTZLKLKWOXHAGHFKJBUUTWRMRTLERRUWYLNDAQJWFGEQVIHEOEBTHJTZJWUYXJEXVPYBCEMLIOIVIJUMIBLBNEEGVXQADPUFHZGWJVZAOQOAGZWPPPYNPYRBXHJLAJMSYVZAVKSVVIRUMNMBNXQQARLGSLORBSAFUOOQAGUVKFNXANAVMHMIBRENQRALTCEHBIJOZBLYERPGNCEEAUNXSKWUNNUNGXGLGWMSPGKBDFOHEKCTYASBBURDYGVQAQJWIJLZFYBUBTUSKJOHRXLGTBURGNNDKWBDGGSSUMUOWZPVPGLJBXNTQPTUJUIUHXKBWIDICBELQVGIDQTCCIDCUCHQGTKBDLKKUNXJEYNYOHOEOPHMRXHFYZGVEFFPBOEUSKCCIYBAYTYADGEUXECYZMWMFEODNZZSFVQOGHWQPMEJKIRZMFFBLVEWREXAKFGYHIPKDDIGIXPPOBBKPACBUKNARGYPIVXTDQHGRGJMMNGXZOPMVVOGNEZOBEAXZDFRMFYVGXBUMEKJQTIDBVUQXTNZKJLTJMFUWHIRMCSFIXIAFOHUHAPQVKSFPYICTIUPSVQPHUMVXNJJGNHQLGDDPCGASHTBOHQRINWFZVCIIQONPSSEYHMXPYGZLBGRTLGTMPZFCLNCEHBECGVHRXDJQOILTBEOOKXLXWMNXUIUVDMEMZCSFWLNVSFOURGVRWPFVBTKZLTGGUOEFAZHKKWWRPRZHBKDGJXFKZISLRPGPEWZSVLWDPKSRAQMLWIHPIREOPGIGFIIUOWDLNMVIIUZXXLULBEEQUZVGWWTZFWMIHQJMTFXIQPMLSBNLDCDDJZGTKJQVSLBOEZEGRREKQNOFDCYRXANNPLMPSSTIDVJPIIREFZTLQANHLRTKGROLYEVQYRZZIYDHLQSIFYBBYWFHPCCQAYQPRWZYBLBPOQYVORROPLAFISLLXOIAIKAMWQRWIDYLKOXEOTTLCMHFTGBHOOVSGTTTIZFCDGKAZOLYYYITSIATKAMDVDIXKHAKQBTBNXQJWCQHMRVXKAMHZTIFSEETKJRGLUKXXBUCKHXDDQYXQJTDQJXXYLULJAIUEDJCWDXNDBNJBBEGQRMQMROXEAYIXVHQTTZPDSIWJCFXWAZLARHKTNHGLUKGMMKLRUNXQDQPQYUTZCMNULAZYLNHKSJBGYIVVRGUMOCMXKNJQISXHATLRZKQVYBBXXPBDLDZPCNBDSUDQSOSPYJOYBNNUIESBZCSPUCLUMJAXEVJIKRHXAJSDIDICODTXEMLGKGGDPQFRENAKQVQVNYYIIAXYKZKKTNJOKMITTQPWNOQVXAALUKEJBTTQWIEFEFAKDPZCATSVCCGAXEQFNAFBEXIXZRHBLHQCENPMNABSQSLCJZWHNMULKLIIZLFSRCSWDTVBKZYZSPANLUNCTTQBYNJMBIFMM

Answer 3

威尔法人

Answer 4

float和绝对定位都会脱离标准文本流，会导致父级元素塌陷

Answer 5

HTML结构不对，还有不知道你说的是哪一个A标签