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

时间:2020-9-21 作者:admin

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

高度塌陷

当我们在页面布局的时候经常不小心会发现布局和你想象中的不一样,有一大的原因是你进行元素浮动的时候产生了浮动常见的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;
    }
    优点:清除方便
    缺点:代码多,难理解

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。