首页手记 css3定位对浮动的影响

css3定位对浮动的影响

标签：

Html/CSS Html5 CSS3

今天发现了个有意思的地方,我们知道子元素用浮动布局时,父元素就会发生高度塌陷.
避免这种现象的方法网上很多种,这里不赘述了,这里说一种少见的方法,用定位来清除浮动,在父元素上设置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>

点击查看更多内容