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

目录

一、问题

二、解决方法

三、总结

---

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)代码如下：

<template>
    <div class="parent">
        <div class="son">
            son
        </div>
    </div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {
        
    },
})
</script>
<style lang="scss">
.parent{
    height: 100%;
    background:red;
    margin:40px;
    .son{
        position: absolute;
        height:100px;
        background:green;
    }
}
</style>

2)效果如下：

a.无绝对定位

b.子元素fixed

c.子元素absolute

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

三、总结

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

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

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

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

/*

希望对你有帮助！

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

*/