今天发现了个有意思的地方,我们知道子元素用浮动布局时,父元素就会发生高度塌陷.
避免这种现象的方法网上很多种,这里不赘述了,这里说一种少见的方法,用定位来清除浮动,在父元素上设置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>
随时随地看视频
热门评论
-
qq_星空下美_02017-05-02 1
-
慕勒90735192017-05-05 0
查看全部评论我平常都是用display:table
position:absolute;
relative
fiexd
这三个有什么区别？求指教 先谢过