高度塌陷

一、什么是高度塌陷？

简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .par {
            border: 1px solid green;
        } 
        .sub {
            width: 20%;
            height: 50px;
            float: left;
            border: 1px solid red;
        }
        .only {
            width: 30%;
            height: 60px;
            background: #999;
        }
    </style>
</head>
<body>
    <div class="par">
        <div class="sub div1"></div>
        <div class="sub div2"></div>
        <div class="sub div3"></div>
    </div>
    <div class="only"></div>
</body>
</html>

上面的这个例子，可以看出来class为par的div的内部是含有三个子div的，当子div没有设置浮动的时候，表现出来大的效果是下面这样的，可以看出class="only"这个div的显示是在class="par"的后面的，而class="par"的高度等于里面的div（此时是按照块元素方式进行排列的）撑起来的高度

这里写图片描述

当sub这个类选择器设置了float: left的时候，结果如下面所示，可以看出来，好像它们都挤到一块去了，而class="par"的这个外部div的height很明显是等于0的，它里面的div是浮动排列的，而class="only"的这个div可以看出来是“跑到”它上面的元素的位置去的，就好像它上面的元素都并不存在似的，这个也就是我今天要说的“高度塌陷”这个问题了
这里写图片描述

二、解决办法

首先从上面的例子中可以很容易看到，导致问题出现的原因就是因为设置了浮动，当子元素设置了浮动的时候，子元素就会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素高度塌陷

那么浮动是什么呢？

float是css的定位属性，通过使用float这个属性可以实现元素的浮动

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动，并会显示在其文本中出现的位置
inherit	规定应该从父元素继承float属性

下面就来说一下解决（清除浮动）的办法

1. 父元素结束之前，添加一个标签

<div style="clear: both;"></div>

优点：简单，易于实现

缺点：添加了没有意义的空标签

2. 父元素设置`overflow: auto`或者浮动元素设置`overflow: hidden`

.par {
  border: 1px solid green;
  overflow: auto;
} 
.sub {
  width: 20%;
  height: 50px;
  float: left;
  border: 1px solid red;
  overflow: hidden;
}

缺点：overflow: auto如果超出范围会自动生成一个滚动条，而overflow: hidden可能会导致超出部分直接隐藏且不占用文档流的空间

3. 让父元素本身也浮动

.par {
  border: 1px solid green;
  float: left;
}

缺点：使得跟父元素相邻的元素的布局受到影响，不推荐使用

4. 使用CSS的after伪元素

.clearfix:after {
  content: ".";         /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
  display: block;       /*使得生成的元素以块级元素显示，占满剩余空间*/
  height: 0;            /*避免生成的内容破坏原有空间的高度*/
  clear: both;          /*闭合浮动*/
  visibility: hidden;   /*使得生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
}
.clearfix {
  zoom : 1;             /*触发IE6/7的haslayout*/
}

三、BFC（Block formating context）

BFC块级格式化上下文，它是一个独立的渲染区域，一句摘自别人博客的话“BFC元素特征表现原则就是，内部元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素”（http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/）

触发BFC的情况：

float的值不为none的时候
overflow的值为auto，scroll或者hidden
display的值为table-cell，table-caption，inline-block
position的值不是relative和static

看到这里是不是发现，这个和上面列举的方式有点关系了，对的，我们也不难看出，触发了BFC就可以消除（闭合）浮动

关于这个问题就先写到这里了，希望对你有帮助 ^_^

来源：CSDN

作者：Dear_Mr

链接：https://blog.csdn.net/Dear_Mr/article/details/71325719

标签

bfc

overflow