鍍金池/ 問(wèn)答/HTML/ 浮動(dòng)的子元素清除了浮動(dòng)依舊無(wú)法撐開父元素

浮動(dòng)的子元素清除了浮動(dòng)依舊無(wú)法撐開父元素

請(qǐng)教各位一個(gè)css的問(wèn)題，搞不懂這個(gè)demo里的ul的寬度為什么沒(méi)有自適應(yīng)變寬。發(fā)現(xiàn)把div去掉浮動(dòng)或都去掉相對(duì)定位的話，ul就可以自適應(yīng)變寬。但還是不知道什么原因?qū)е逻@樣。因?yàn)榫褪切枰猽l的父級(jí)既是浮動(dòng)又是相對(duì)定位。

就是想知道li 為什么沒(méi)排成一行。雖然我知道給ul加固定寬度就能水平排列。但是如果頁(yè)面里僅有這個(gè)ul和li，而ul是絕對(duì)定位，li浮動(dòng)的話，ul不設(shè)寬度li也照樣能橫過(guò)來(lái)的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
div{

position: relative;
float: left;
margin-left: 20px;
border: 1px solid #000;

}
ul{

position: absolute;
list-style: none;

}
ul::after{

content:"";
display: block;
clear:both;

}
ul li{

float: left;

}
</style>
</head>
<body>

<div>
    <p>這是第一行文字</p>
    <ul>
        <li>這是第二行文字</li>
        <li>這是第三行文字</li>
    </ul>
</div>

</body>
</html>

回答
編輯回答
茍活

剛剛發(fā)現(xiàn)優(yōu)酷里那些定位的hover二級(jí)菜單都是有寬度的。算了，以后我也加寬度吧。雖然還是不太清楚什么原因，但總之貌似只要絕對(duì)定位標(biāo)簽的父級(jí)除了定位外，還有浮動(dòng)的話，那么定位的子元素就必須加寬度。就這么記了。

2018年5月23日 19:05
編輯回答
影魅

大哥，你用了絕對(duì)定位高度就沒(méi)有了啊，不占位了

2017年3月22日 21:05
編輯回答
瞄小懶

浮動(dòng)的div寬度是靠?jī)?nèi)部元素的寬度撐開的，不是按照父元素的寬度來(lái)的，絕對(duì)定位也一樣

2017年6月9日 00:14