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

页面布局产生高度塌陷解决方法
高度塌陷当我们在页面布局的时候经常不小心会发现布局和你想象中的不一样,有一大的原因是你进行元素浮动的时候产生了浮动常见的bug:高度塌陷也叫高度坍塌为什么会产生这个bug呢?以及这个bug我们应该怎么解决造成高度塌陷的原因:父级元素没有设置高度,子级元素含有浮动高度塌陷的解决方法:

高度塌陷
当我们在页面布局的时候经常不小心会发现布局和你想象中的不一样,有一大的原因是你进行元素浮动的时候产生了浮动常见的bug:高度塌陷也叫高度坍塌
为什么会产生这个bug呢?以及这个bug我们应该怎么解决
造成高度塌陷的原因:父级元素没有设置高度,子级元素含有浮动
高度塌陷的解决方法:

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

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

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

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

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

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

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 页面布局产生高度塌陷解决方法
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏