【LemonCK】CSS盒子塌陷问题

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

出现原因?
父盒子的空间有限，无法容纳浮动的儿子，导致儿子离家出走。（O(∩_∩)O哈哈~）
当父元素未设置（足够）高度的时候，子元素设置了浮动的属性时，子元素就会跳出父元素的边界（脱离文档流）。
（ 当父元素的高度为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.给外部的父盒子也添加浮动，让其也脱离标准文档流（但可能会影响页面的布局）