CSS盒子塌陷问题的讨论

什么是盒子塌陷 ？
理论上在父元素内部的元素 出现在盒子外部

出现原因?
一个父亲不能被自己浮动的儿子，撑出高度。
当父元素未设置（足够）高度的时候，子元素设置了浮动的属性时，子元素就会跳出父元素的边界（脱离文档流）。
（当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。）

（如图：子元素设置浮动 导致父元素塌陷）

解决方法：

• 1. 要给没有设置高度的父元素设置 overfloat：hidden;
  overflow:auto; 有可能出现滚动条，影响美观。
  overflow:hidden; 可能会带来内容不可见的问题。

• 2. 在外部盒子内最下方添上带clear属性的空盒子
  （设置 clear：both;）用最下面的空盒子清除浮动，把盒子重新撑起来

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

并不推荐 引入了不必要的冗余元素

• 3. 设置 after 伪类清除浮动（外部盒子的after伪元素设置clear属性。）

.father:after{
                clear: both;
                content: "";
                width: 0;
                height: 0;
                display: block;
                visibility: hidden;
}

• 4. 将盒子大小写死，给每个盒子设定固定的width和height，直到合适为止（缺点是非自适应，浏览器的窗口大小直接影响用户体验）

• 5. 给外部的父盒子也添加浮动，让其也脱离标准文档流（但可能会影响页面的布局）