父元素自适应宽高度，子元素浮动导致高度塌陷
高度塌陷:
示例图：
image.png
HTML:
<div class="father">
<div class="child">这是子元素</div>
</div>
CSS:
.father{
border: 2px solid lightseagreen;
}
.child{
width: 200px;
height: 200px;
border: 2px solid lightsalmon;
float: left;
}
第一种解决方案：
通过给父元素设置一个合适的高度（比如300px）可以解决这个问题，但同时会给父元素设限，如果父元素没有设置宽度，那么仍然会出现高度塌陷的问题。
修改后的CSS:
.father{
height: 300px;
border: 2px solid lightseagreen;
}
效果图：
image.png
第二种解决方案：
给父元素设置浮动，但是浮动元素过多也会造成后续的一些问题
修改后的CSS:
.father{
float:left;
border: 2px solid lightseagreen;
}
效果图：
image.png
第三种解决方案：
在浮动元素之后加上一个div盒子，高度为0，clear:both,
修改后的CSS：
.father{
border: 2px solid lightseagreen;
}
.child{
width: 200px;
height: 200px;
border: 2px solid lightsalmon;
float: left;
}
.clear{
clear: both;
height: 0;
overflow: hidden;
}
HTML:
<div class="father">
<div class="child">这是子元素</div>
<div class="clear"></div>
</div>
效果图：
image.png
第四种解决方案:
父元素设置为inline-block,但是此时如果想让父元素使用margin: 0 auto居中是不可能了（行内块元素有一个特点就是如果它的宽高没有设置，那么它就会收缩以适应内容宽度）
修改后的CSS:
.father{
display:inline-block;
border: 2px solid lightseagreen;
}
效果图：
image.png
第五种解决方案:
设置父元素overflow: hidden，说到了overflow:hidden的话，那就有的说了，首先来回顾一下overflow是干嘛的
overflow有这么几个常用的属性值：
1. hidden
2. auto
3. visible(默认值，不多说)
4. scroll
5. inherit(继承父元素的overflow属性，不多说)
首先，说一说hidden，举个栗子如下
HTML:
<div class="father">
<div class="b f"></div>
<div class="b s"></div>
</div>
CSS:
.father{
width: 500px;
height: 200px;
background: black;
}
.b{
width: 120px;
height: 120px;
}
.f{
background: darkred;
}
.s{
background: blue;
}
溢出效果图（俩儿子加起来240px高，比父元素高到不知道哪里去了/滑稽）：
image.png
如果给父元素改一下，改成overflow: hidden;
效果图如下：
看得出来第二个儿子被剪掉了一部分，只能露个脸，下半身是看不到了
那改成auto呢？试试
image.png
感谢滚动条给了二儿子重生的机会，他粗线了，俩儿子都可以看到了
再改，改成scroll
image.png
这次更高端了，水平方向都出现滚动条了，那我是不是可以把俩儿子弄胖一点，比如要比父元素宽200px呢，试试
image.png
以上几个图大致得出的结论如下：
- 当父元素有宽高的时候，且overflow为hidden，此时如果子元素比父元素宽或者高（总之会溢出），那么子元素溢出的部分会被裁剪掉
- 当父元素有宽高的时候，且overflow为auto， 此时如果子元素比父元素高，那么会出现纵向的滚动条让子元素得以施展全貌，同理子元素比父元素宽的时候，会出现横向的滚动条。如果子元素既比父元素宽又比父元素高，那么结果就更简单了，横向纵向都有滚动条（结构跟scroll一样了）
- 当父元素有宽高的时候，且overflow为scroll时，无论啥时候都有滚动条，他还不管你能不能滚，需不需要滚，都会显示滚动条（这就比较死板了）
现在我们回到overflow:hidden清除浮动上来，为什么overflow:hidden可以清除浮动呢？我们的例子中父元素是没有宽高的，正是因为没有宽高才导致了子元素浮动造成了高度坍塌，为什么会这样呢？说白了就是正常流中的子元素会以自己的宽高撑起自己没有宽高的父元素，但是浮动元素是脱离了正常流的，怎么撑起自己的父元素呢？说白了就是浮动的子元素即使有高度也并不会算在其父元素的高度内，那怎么办？那就让浮动元素的高度可以算在父元素内，而满足这一条件的就是BFC（Block formatting context 块级格式化上下文），而恰恰overflow:hidden可以触发BFC
传说中的BFC如果可以，再看看别的比如 IFC GFC FFC
废话不多说，搞起
HTML:
<div class="father">
<div class="b">我是儿子</div>
</div>
CSS：
.father{
background: black;
overflow: hidden;
}
.b{
width: 120px;
height: 120px;
float: left;
background: darkred;
}
效果图：
image.png
来，再拉一没用overflow:hidden老图对比一下
image.png
最后一种，after伪元素也是现在比较主流的方法
HTML:
<div class="father clearfix">
<div class="b">我是儿子</div>
</div>
CSS:
.father{
background: black;
}
.b{
width: 120px;
height: 120px;
float: left;
background: darkred;
}
.clearfix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix{
/* 触发 hasLayout */
zoom:1;
}
效果图：
image.png
最后一种方法看起来跟第三种方法很像，多出来的zoom是为了触发 hasLayout 以兼容IE6
总结一下，6种方法，各有优劣，实践出真知
网友评论