什么叫高度塌陷-且如何清除浮动

2021/9/16 6:06:16

编程Tag： 元素高度 height 清除浮动 hidden 塌陷

本文主要是介绍什么叫高度塌陷-且如何清除浮动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先高度塌陷是怎么出现的：
当所有的子元素浮动的时候，并且父元素没有设置高度，这样父元素就会产生高度塌陷。
看别人讲的大概是：高度塌陷后，父元素的高度被迫为0，也就是我们在调试器查看元素时看到他缩成一小块了的样子。
具体的我后面碰到了再去思考了，现在也不是特别明白

这是设置浮动之前的效果：
在这里插入图片描述
这是设置了浮动之后的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .top {
        width: 100%;
        border: 1px solid red;
        
    }
    .container {
        width: 100px;
        height: 50px;
        
    }
    .top .left{
        float: left;
    }
    .top .right{
        float: right;
    }
    .bottom {
        width: 100%;
        height: 100px;
        background-color: gray;
    }

</style>
<body>
    <section class="top">
        <section class="container left">111111</section>
        <section class="container right">222222</section>
    </section>
    <section class="bottom">
        bottom
    </section>
</body>
</html>

样子大概就这样
那么清除浮动的方式一：
给父元素添加overflow:hidden; 还有zoom:1;
加上后面的是针对ie6的兼容，不过超出部分会被隐藏，布局的时候要注意下

方式二：
在所设置浮动的最后加上一个空的div
例如：

<section class="top">
        <section class="container left">111111</section>
        <section class="container right">222222</section>
        <section class="clearfloat"></section>
</section>

也就是<div class="clearfloat"></div>
然后给他个css样式
.clearfloat{
clear:both;
height:0;
overflow:hidden;
}
缺点：要是你好几处地方用了浮动，这个空的也就写得多

方式三：
给塌陷的元素添加一个 :after伪类,----------------top:after{
…
}
具体原理我不会，以后再去了解
不过貌似直接下面这样写也可以，估计是给全部都添加吧，我真不会，你们会的也可以评论教我，让我剽窃下。

`:after{
content:"";
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
上面那行代码我手敲的，练练手记一下嘛，敲错字错了别怪我嘿嘿

方法四：
跟法一差不多：给父元素加个样式：
overflow：auto;
不过这里就有个小问题，他可能会有滑动条，不用问也是剽窃来的。

方法五：
都说了高度塌陷是因为父元素没有设置高度引发的，所以直接给父元素添加个高度就好了
不过兼容性不好，不能自适应布局。

其他的我就懒得写了，你别说方法还挺多。。。

这篇关于什么叫高度塌陷-且如何清除浮动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

什么叫高度塌陷-且如何清除浮动

相关编程文章