今天发现了个有意思的地方,我们知道子元素用浮动布局时,父元素就会发生高度塌陷.
避免这种现象的方法网上很多种,这里不赘述了,这里说一种少见的方法,用定位来清除浮动,在父元素上设置position:absolute;(使用relative则不行)就能避免高度塌陷.demo如下,大家可以试试.
多说一句,其实在设置了display:flex;的元素的子元素也能避免高度塌陷.
浮动这玩意真是复杂
<!DOCTYPE html>
<html>
<head>
<title>position</title>
<style type="text/css">
.son{
background: red;
width: 100px;
height:100px;
float: left;
}
.par{
position: absolute;
left:100px;
top:100px;
border:1px solid #666;
padding:5px;
}
</style>
</head>
<body>
<div class="box">
<div class="par">
<div class="son"></div>
</div>
</div>
</body>
</html>點(diǎn)擊查看更多內(nèi)容
3人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦