高度塌陷
一、什么是高度塌陷
在文档流中，当父元素没有设置高度的时候，父元素的高度就取决于子元素的高度，也就是常常说的“由子元素撑开”。当子元素设置为浮动，脱离了文档流，这时候就会造成父元素的高度塌陷，因为没有子元素“撑着它的高度”。这样会导致父元素后面的元素往上移，造成布局混乱。那么应该怎么解决咧？
二、解决办法
- 在后面增加空的子元素，设置clear:both
- 要注意这个清除浮动的对象并不是“浮动的对象”，而是“受浮动影响的对象”,因此要在后面增加一个空的子元素。
- 缺点：增加了无意义的标签，不符合我们标签语义化的要求，有违结构与表现的分离。
这里我开始理解错了，设置成了父元素的清除浮动。这是错误的。本身父元素就是因为子元素而造成的高度塌陷，清除浮动是针对受浮动元素影响而环绕在其周围的元素。通过对冗余元素设置清除浮动，冗余元素会躲开浮动元素不被其遮盖，而父元素为了包裹住它自然就被撑开了。
-
对第一种方法的优化：使用伪元素选择器，内容生成：
#parent::after{
content:"";
display:block;
clear:both;
} -
给父元素创建BFC，这样它就可以包含浮动元素啦。（不清楚BFC的可以看一下我之前的笔记）,比如：
- overflow:hidden，可能会导致内容截胡或者出现滚动条
- display:inline-block，父元素宽度会丢失
- 给父元素设置height
- 给父元素也设置float，可是这样蛮鸡肋的，会影响父元素相邻的元素。
目前比较好的方法是使用伪元素的方法。不然为了解决高度塌陷而给它增加冗余的标签或者设置为inline-block、浮动、绝对定位等，不利于页面标签的管理或者反而会影响到其它元素的布局。
