html--高度塌陷（css）几种小技巧

最新推荐文章于 2023-12-19 18:02:15 发布

aymfx

最新推荐文章于 2023-12-19 18:02:15 发布

阅读量1.6w

点赞数 3

分类专栏： html5 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_29104999/article/details/53504338

版权

html5 专栏收录该内容

11 篇文章

订阅专栏

高度塌陷的情况：

当父元素没有设置高度，并且子元素块都向左浮动起来了，那么父元素就会塌陷

解决办法

1.在高度塌陷的父div里面加一个div：

<div id="a">
          <div id="a1"></div>
          <div id="a2"></div>
          <div style="clear: both;"></div>//加一个标签，清除浮动
     </div>

优点：适合初学者，兼容性强。
缺点：代码不简练，不利于优化。

2.overflow + zoom方法

 #a{
                background: red;
                /*第二种方法*/
                overflow: hidden;
                zoom:1;
           }

优点：兼容性强。
缺点：对margin属性会有影响，不能设负值，会被裁掉。负值绝对定位也不可以。

3.after + zoom方法（绝杀)

 #a{
                background: red;
                zoom:1;
           }
           #a:after{
                  display: block;
                  content: '.';
                  clear: both;
                  line-height: 0;
                  visibility: hidden;
           }

优点：通用，兼容性强
缺点：不好记。

整个代码片段：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title>高度塌陷问题</title>

    <style type="text/css">
           #a{
                background: red;
                zoom:1;
           }
           #a:after{
                  display: block;
                  content: '.';
                  clear: both;
                  line-height: 0;
                  visibility: hidden;
           }
           #a1,#a2{
               width: 50px;
               height: 50px;
               margin: 10px;
               background: blue;
               float: left;
           }
    </style>
</head>
<body>
     <div id="a">
          <div id="a1"></div>
          <div id="a2"></div>
          <!-- <div style="clear: both;"></div> -->
     </div>

</body>
</html>