css清除浮动 (以及定位产生的高度塌陷) 问题

2021/02/04 09:39
阅读数 103

什么是浮动?

通俗点讲:就是父级元素没有高度,导致产生高度塌陷问题。

什么时候会产生浮动问题?

当给元素设置float之后,元素脱离文档流,父元素没有设置height,造成高度的塌陷。

定位产生的父元素高度塌陷问题?

从这个可以看出并不是只有元素浮动才会使元素脱离文档流造成高度塌陷问题,绝对定位也会造成父元素高度塌陷。

首先说一说如何解决绝对定位产生的父元素高度塌陷问题?

目前小编只发现二种可以解决的方法:

第一种方法:
       直接给父元素高度;
        缺点: 只适合高度固定的布局。
第二种方法:
       利用JavaScript先获取到绝对定位子元素的高度,在将其赋值给父元素;
        缺点: 操作麻烦,对新手不友好。




(欢迎大佬补充)

之后我们在来聊一聊解决float浮动引起的父元素高度塌陷的问题?

在这里咱们只说常见的,好用的解决方法:

第一种方法:
       和解决绝对定位的方法一样,直接给父元素高度;
        缺点: 还是只适合高度固定的布局。其余不推荐使用。
第二种方法:
       给父元素的after伪类;
.father::after { content: ""; clear: both; display: block; }
先了解一下clear:both;该属性的值指出了不允许有浮动对象的边情况,其实我们相当于在父元素底部添加了一个空的div,给空div clear:both属性,让这个空div把盒子撑开了。但是由于这样写会对一个项目出现很多的空div让页面结构混乱,这让我们想起可以利用::after的伪元素解决创建空div的尴尬。
        缺点: 代码多,不利于新手理解。
第三种方法:
       直接给父元素添加css:overflow: hidden;
原理太抽象了,故不在此做出声明,大家可以自行百度(BFC)了解。
        缺点: 可能出现想不到的问题,玄学。










祝大家学习快乐!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部