页面布局产生高度塌陷解决方法

2 篇文章 0 订阅
2 篇文章 0 订阅

高度塌陷

当我们在页面布局的时候经常不小心会发现布局和你想象中的不一样,有一大的原因是你进行元素浮动的时候产生了浮动常见的bug:高度塌陷也叫高度坍塌

为什么会产生这个bug呢?以及这个bug我们应该怎么解决

造成高度塌陷的原因:父级元素没有设置高度,子级元素含有浮动

高度塌陷的解决方法:

  1. 给父级元素添加高度
    优点:解决简单
    缺点:就不能做到宽高自适应了

  2. 在出现高度塌陷的父级元素设置overflow:hidden
    优点:可以解决高度塌陷并且能做到自适应,好理解
    缺点:超出当前父级元素的盒子都会被隐藏掉

  3. 在最后一个盒子添加标签div,设置解决高度塌陷的样式
    默认样式:clear:both 清除both 所以 left/right
    清除浮动的原理:清除浮动元素预留下来的空间,为了放心一个浮动元素,清除了上方预留空间,所以可以解决高度塌陷
    优点:出现高度塌陷的地方加一个标签即可
    缺点:添加盒子,出现一些不必要的布局结构,代码冗余

  4. 万能清楚法 – 不好理解,会用就行
    在当前出现高度塌陷的元素上添加类名 clear-fix
    clear-fix::after{
    content:"";
    width:100%;
    height:0;
    display:block;
    clear:both;
    overflow:hidden;
    visibility:hidden;
    }
    优点:清除方便
    缺点:代码多,难理解

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值