CSS父元素没有设置高度，元素浮动后父元素无法跟随子元素的高度-_-

Posted 2023-04-24

参考技术A 最开始就是这样子啦，可是我脑子一热，想让b浮动(工作中确实会遇到这种情况)，然后float:left;，发现父元素没高度了(看起来就像父元素没了)。

就像这样子：

(其实我最开始是发现给了个border-bottom属性，它跑去顶部了)

这种情况，给父元素一个height值就可以了，可是我不能给它一个固定的高度，我想让它随内容的高度变化。

怎么办呢。

诶，我想到一个办法：

我在父元素最后添加了一个空的元素c，用c清空左右浮动，就又回到最开始的效果了，而且动态添加其他元素的话，父元素高度也会像开始那样随之变化了。

清除浮动

不清除浮动的一个常见危害是高度塌陷。关于高度，下面说这么几种情况：

1. 如果父元素已经规定了度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）
2. 如果父元素没有规定高度：
   2.1 如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框保不住子元素
   2.2 如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素更高的话，还是会塌陷

解决浮动的办法： clear:both，不允许元素两侧有浮动（你可以理解为，遇到浮动元素会往下挪，从而撑起高度）

1. 使用::after伪元素

.cl{zoom:1;}
.cl::after{content:‘‘;display:block;height:0;visibility:hidden;clear:both;}

 

加两个点是CSS3新规，兼容的话一个点就好

1. 直接为父元素建立一个清除浮动的最末子元素，如

<div>
    <div style="float:left;">I M LEFT</div>
    <div style="float:right;">I M RIGHT</div>
    <div style="clear:both;"></div>
</div>

　　

缺点在于创建了不必要的节点，所以普遍做法是第一种