CSS高度塌陷

最新推荐文章于 2024-03-18 11:10:43 发布

丨Q ，Q丨

最新推荐文章于 2024-03-18 11:10:43 发布

阅读量176

点赞数

分类专栏： html+CSS

本文链接：https://blog.csdn.net/qq2071114140/article/details/90484044

版权

当子元素浮动导致父元素无法计算高度时，会出现CSS高度塌陷问题。解决方法包括：为父元素设置高度、创建BFC（如设置overflow为非visible）或使用clear属性清除浮动影响。最佳实践倾向于使用伪元素来避免添加额外HTML结构。

摘要由CSDN通过智能技术生成

CSS高度塌陷

一.什么是高度塌陷

当一个元素需要子元素“撑起高度”，也就是说，不给该元素设置高度，而是由子元素的高度来决定时，子元素设置了浮动，这样的情况下，就会出现高度塌陷。

<html>
    <head>
        <style type="text/css">

            .block1{
                background-color: skyblue;
                border: solid 5px blue;
                /*
                 *width由父元素决定
                 *height由子元素决定
                 */
            }

            .block2{
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
                /*
                 *子元素设置浮动
                 */
                float: left;
            }   
        </style>
    </head>

    <body>
        <div class="block1">
            <div class="block2"></div>
        </div>
    </body>
</html>