父级没有被子级撑开

个人学习笔记
高度未撑开
一、当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度
1.设置高度
2.overflow:hidden
清浮动

.clearfloat:after{
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  height:0
}

Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
normal :　 默认值。应用对象的实际尺寸
number :　 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100％时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以数值，也可以百分比。如：zoom:1，zoom:120％。而这个属性只要在IE中才起作用，所以很少使用它的实际用处，而最经常用到的是清除浮动等

.clearfloat{
  zoom:1
}

二、使用了absolute
去掉position:absolute; 或者改成 relative；
上述两种情况都是属于 脱离文档流 的原因造成的

父级高度是auto，子级高度100%但是元素却无法撑满
1.给父元素设为块级并加固定高度
2.父元素height:auto; overflow:hidden；
3.不苛求兼容性的话父级display: flex;

宽度未撑开
1、父级元素宽度不固定，父级元素设置为inline-block或者添加float；
2、对父级元素使用min-width，这样只限制了最小的宽度，如果子元素变宽，父级同样会变宽；

https://blog.csdn.net/marian96/article/details/70268168