子元素高度不为0而父元素高度为0产生原因及解决办法

最新推荐文章于 2023-02-13 21:51:23 发布

kk_back

最新推荐文章于 2023-02-13 21:51:23 发布

阅读量4.4k

点赞数 2

分类专栏：前端 html 文章标签：前端 html

本文链接：https://blog.csdn.net/u011877410/article/details/80564305

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

1.背景

最近在开发过程中，遇到了这么一个很奇怪的现象，在浏览器中打开开发者工具，查看元素时，发现当前元素的高度为0，但是查看它的子元素时，发现其子元素的高度并不为0，非常奇怪，最后还是通过网络解决了这个问题，在这里记录一下。

2.产生原因

是因为子元素设置了浮动，设置浮动之后是无法撑开父元素的。

先来看一下现象：

子元素没有浮动

下面是div下套了个div，子div因为有文本节点，所以会有一个默认高度。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <style type="text/css">
            .children {
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="children">
                这是子元素
            </div>
        </div>
    </body>
</html>

打开浏览器的开发者工具查看元素高度

此时父元素和子元素的高度一致。

子元素添加浮动

但是如果将子元素设为浮动之后，父元素的高度会变为0。

子元素的高度没有任何变化，但是父元素此时的高度变为了0.

3.解决方法

这里只列出个人觉得比较简单且容易理解的解决方法。

只需要在浮动的子元素后清除浮动，在子元素后添加一个空div，让其清除浮动。
<div style="clear: both;"></div>
让父元素也浮动，浮动元素会闭合浮动元素

kk_back

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
子元素高度不为0而父元素高度为0产生原因及解决办法

1.背景最近在开发过程中，遇到了这么一个很奇怪的现象，在浏览器中打开开发者工具，查看元素时，发现当前元素的高度为0，但是查看它的子元素时，发现其子元素的高度并不为0，非常奇怪，最后还是通过网络解决了这个问题，在这里记录一下。2.产生原因是因为子元素设置了浮动，设置浮动之后是无法撑开父元素的。先来看一下现象：子元素没有浮动下面是div下套了个div，子div因为有文本...
复制链接

扫一扫