03_说一说产生塌陷的原因以及清除浮动的几种方法

一、什么是高度塌陷

在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的，即子元素多高，父元素就有多高。但是当子元素设置浮动之后，子元素就会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级元素的高度变为0了，下面的元素会上去，这样会导致页面布局混乱。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

.parent {
    width: 300px;
    border: 5px solid #f00;
}
.child {
    float: left;
    width:100px;
    height: 100px;
    border: 5px solid #00f;
}

二、解决方法

1、父元素结束之前添加一个标签 <div style="clear:both;"></div>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div style="clear:both;"></div>
</div>
<div class="bottom"></div>

.parent {
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 200px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}

缺点：增加了无意义的标签

2、让父元素本身也浮动 float：left;

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="bottom"></div>

.parent {
    float: left;
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}

缺点：虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响

3、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="bottom"></div>

.parent {
    height: 100px;
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}

缺点：父元素与子元素的边框会重叠，无法自适应子元素的高度

4、给父元素设置display: inline-block;

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="bottom"></div>

.parent {
    display: inline-block;
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}

缺点：会导致父元素的宽度丢失，与相邻元素会产生额外的间距

5、给父元素设置 overflow : hidden;

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="bottom"></div>

.parent {
    overflow: hidden;
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}

缺点：要是子元素要margin负值定位或是负的position定位，溢出部分会被裁掉，如二级菜单的影响

6、通过after伪类，after + zoom方法（推荐）

<div class="parent clearAll">
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="bottom"></div>

.parent {
    border: 5px solid #f00;
}
.child {
    float: left;
    width: 100px;
    height: 100px;
    border: 5px solid #00f;
}
.bottom {
    width: 200px;
    height: 100px;
    background: #0f0;
}
.clearAll:after {
    content: ''; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}
.clearAll {
    zoom : 1; 
}

利用伪类来清除浮动，其效果跟创建一个空的div并设置其为 clear：both 是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。