浮动元素的使用导致高度塌陷问题

当我们使用float这个属性的时候,有时会发现父元素容器的高度塌陷了,本该包含这一块的高度没有了,这是因为float设置浮动以后,其元素脱离文档流,从而导致的

解决方法:

1.给父元素设置指定的宽高

​ 缺点:这会显得有点呆

2.给父元素设置overflow:hidden

​ 原理:

​ 1.其本身是隐藏溢出的内容

​ 2.当遇到float浮动元素的时候,本来应该将其隐藏掉,但是因为是浮动元素脱离文档流没法这样操作它,所以只能让自己适应子元素的高度从而去包住它

3.给父元素也设置float浮动

​ 原理:

​ 让父元素也浮动起来,继续让子元素被父元素所涵盖

​ 缺点:这会影响布局

4.添加一个块级元素,比如div,给其设置clear:float,清除浮动影响

​ 缺点:增加无意义的标签

5.通过伪类::after清除浮动

​ 这个和方法4里,通过块级元素设置clear:float是一样的手法,只不过这里用伪类::after代替了div而已