父元素不设置高度，子元素有高度：父元素没有被子元素撑开

目录

一、问题

二、解决方法

三、总结

---

tiips:如嫌繁琐，直接移步总结即可！

一、问题

1.父元素里面放了子元素，子元素有高度，父元素没有设置高度。按道理父元素的高度应该和子元素的一致，但是我看到的却是  父元素高度竟然为 0.

二、解决方法

1.看到网上都说是因为子元素设置了  浮动 导致的，清除浮动就可以。但是我检查了代码里面真的没有浮动

清除浮动的3种常见方式；详情可见：浮动 - 学习 Web 开发 | MDN

1)父元素设置 overflow:hidden

2)子元素中添加一个 占位元素并且设置class='clear'  ； .clear{clear:both}

3)父元素添加伪类：

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

2.只能一个个排查元素样式：最后发现是因为子元素设置了 绝对定位 fixed或absolute导致的。

1)代码如下：

2)效果如下：

a.无绝对定位

b.子元素fixed

c.子元素absolute

3)将绝对定位去掉或者改成相对定位就可以了。

三、总结

1.父元素未设置高度时，父元素没有被子元素撑开有两种可能：

   1）子元素设置了浮动float——清除浮动

   2）子元素设置了绝对布局——改为相对布局或者直接去除 绝对布局（在不影响样式的情况下）

2.经验不断积累中！只是从前人的代码中积累总是会有些暴躁（应该是对未知的恐惧）

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/