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

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

高度塌陷

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