css高度坍塌及解决方法

发表于

元素脱离文档流导致高度坍塌

在日常的开发页面工作中，我们都知道在文档流内，父元素的高度默认是通过子元素来支撑的（如果我们没有设置高度）,即父元素的高度==子元素的高度。一旦我们设置了子元素的float之后，子元素就会脱离文档流，引发的问题就是父元素不能再通过子元素来撑起高度，直观的表现就是高度坍塌。

一个普遍的例子就是轮播图的圆点按钮小框，比如
8-2.png

一般要实现这个按钮小框，我们都会选择用ul 和 li 元素以及 float样式,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">        
        ul,li{margin:0;padding:0;}
        .carousel{width:400px;height:300px;border:1px solid #000;position:relative;}
        .btn-list{border:1px solid red;padding:10px 0;width:200px;margin:auto;position:absolute;bottom:0;left:24%;}
        .btn-list li{width:20px;height:20px;border-radius:50%;border:1px solid #000;float:left;list-style:none;margin:0 14px; }
    </style>
</head>
<body>
    <div class="carousel ">
        
        轮播内容...
        <ul class="btn-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

这时你会发现这段代码出来的效果并没有什么毛病，但其实高度坍塌真实发生了，只是因为我们使用position解决了内容坍塌的问题，你可以去掉position看看，会变成下面这样：

8-2.png

position算是解决高度坍塌的其中一种方法,下面开始详细介绍几种方法：

方法一：根据W3C标准，在页面中元素都有一个隐藏的属性叫做BLOCK FORMATTING Context，简称BFC，该属性可以通过设置来打开或者关闭，默认是关闭的。

当开启BFC后，元素将会具有以下特性：

  • 元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素可以包含浮动元素

如何开启BFC：

  • 设置元素的浮动，即给上述的ul标签设置浮动，但是会导致ul标签宽度丢失，并且下面的元素会上移，并不能解决问题
  • 设置元素的绝对定位，上面的例子就是用的position：absolute，但是不是所有场景都适用
  • 设置元素的inline-block，这样父元素的宽度会丢失，不推荐
  • 将元素的overflow设置为一个非visible的值（这种方法开启BFC副作用小，IE6中可以适用hasLayout，给父元素设置zoom：1）

方法二：clear属性可以用于清除元素周围浮动元素对元素的影响。这样元素就不会因为出现浮动元素尔改变位置

可选值：


  • left ：忽略左侧浮动 （清除左侧浮动对当前元素的影响）

  • right ：忽略右侧浮动 （清除右侧浮动对当前元素的影响）

  • both ：忽略全部浮动 （清除两侧对他影响最大的浮动对）

  • none : 不忽略浮动，默认值

方法三：通过after伪类，和添加div元素一样，但是不需要添加div元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">        
        ul,li{margin:0;padding:0;}
        .carousel{width:400px;height:300px;border:1px solid #000;position:relative;}
        .btn-list{border:1px solid red;padding:10px 0;width:200px;margin:auto;position:absolute;bottom:0;left:24%;}
        .btn-list li{width:20px;height:20px;border-radius:50%;border:1px solid #000;float:left;list-style:none;margin:0 14px; }
        .clear:after{
           /* 必须设置一个空的congtent,否则不起作用  */ 
            content: "";
            /* 转换成块元素  */
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="carousel clear">
        
        轮播内容...
        <ul class="btn-list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

解决高度坍塌的方法已经介绍完了，具体那种方法，就需要大家见仁见智了！