浮动样式带来的父元素高度塌陷问题及解决办法

最新推荐文章于 2024-02-03 16:05:20 发布

mariner_zp

最新推荐文章于 2024-02-03 16:05:20 发布

阅读量433

点赞数 1

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_41174502/article/details/105190900

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先什么是父元素高度塌陷呢？

我们知道当对父元素里面的子元素开启浮动样式时，子元素就会原地上浮，不再受普通文档流控制，那么此时自然就不再受父元素控制了，而当父元素没有给定高度时，其高度都是由子元素撑开，若此时所有的子元素都浮动的话，父元素的高度就会塌陷为0。下面给个直观例子感受下：

一个ul里面有三个li,此时将父元素的高度注释掉，其高度完全由内容撑开。

当给1设置浮动的时候，2和3依次往上移动，此时父元素高度由2、3撑开：

给所有元素都设置浮动后，父元素高度直接塌陷为0：

那么要如何清楚浮动带来的父元素高度塌陷问题呢？

(1)最直接的给父元素设置固定高度。不过此种方法只建议高度固定的布局。而当浏览器缩放的时候子元素就很容易掉下来。

(2)给父级设置overflow:hidden/auto，触发父元素的BFC化，使得父元素具有包裹性，自适应子元素的高度变化。

(3)给父元素处加一个div标签，然后div{clear:both}。不过此种方法会破坏页面文档结构。

(4)使用伪元素生成一个幽灵元素，手动撑开父元素高度，并给他设置clear：both属性

<style>
    body,li,ul{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 800px;
        margin: 100px auto 0;
        background-color: aquamarine;
    }
    ul>li{
       
        height: 100px;
        font-size: 26px;
        text-align: center;
        line-height: 100px;
        border: 3px solid gray;
        list-style: none;
        float: left;
    }
    li:nth-of-type(1){
        width: 100px;
        background-color: pink;
    }
    li:nth-of-type(2){
        width: 150px;
        background-color: red;
    }
    li:nth-of-type(3){
        width: 200px;
        background-color: blue;
    }
    ul::after{

        content: "";

        display: block;

        clear: both;

    }
    
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

最后，说明一下:

clear:left(清除左浮动)

clear:right(清除右浮动)

clear:both（两侧都清除）

mariner_zp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动样式带来的父元素高度塌陷问题及解决办法

首先什么是父元素高度塌陷呢？我们知道当对父元素里面的子元素开启浮动样式时，子元素就会原地上浮，不再受普通文档流控制，那么此时自然就不再受父元素控制了，而当父元素没有给定高度时，其高度都是由子元素撑开，若此时所有的子元素都浮动的话，父元素的高度就会塌陷为0。下面给个直观例子感受下：一个ul里面有三个li,此时将父元素的高度注释掉，其高度完全由内容撑开。...
复制链接

扫一扫

专栏目录