CSS浮动时父级的块级元素高度塌陷问题解决

最新推荐文章于 2022-04-06 15:58:25 发布

freedom_zdh

最新推荐文章于 2022-04-06 15:58:25 发布

阅读量258

点赞数

父级元素的高度塌陷效果

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。效果如下：
在这里插入图片描述
水平导航栏的ul父级元素塌陷成一条直线，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul {

        padding: 0px;
        margin: 0px;
        list-style-type: none;
        background-color: #dddddd;
        border: 1px solid black;
    }

    li {
        float: left;

        /*border: 1px solid black;*/
    }

    a {
        display: block;
        padding: 8px;

    }
</style>
<body>

<ul>
    <li><a href="#">javascript</a></li>
    <li><a href="#">java</a></li>
    <li><a href="#">html</a></li>
    <li><a href="#">联系方式</a></li>
</ul>
</body>
</html>

使用overflow:hidden修复

在之前的代码基础上在被塌陷的父级元素ul的样式中加上overflow:hidden即可修复父级塌陷
修复之后的父级块元素被撑开了，效果如下：
在这里插入图片描述

添加空白元素清除浮动修复

使用overflow:hidden解决会遇到奇怪的问题，推荐使用伪类添加空白元素然后清除浮动解决塌陷问题

在被塌陷的元素中添加样式，下面的例子使用的是class为boxContain的父级元素

    .boxContain::after{
        content: "";  /*内容为空*/
        display: block;  /* 设置为块级元素 */
        clear: both;  /* 清除浮动 */
    }

freedom_zdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS浮动时父级的块级元素高度塌陷问题解决

父级塌陷效果水平导航栏的ul父级元素塌陷成一条直线，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> ul { padding: 0px; margin: 0px; list-
复制链接

扫一扫