css高度塌陷及其解决方法

高度塌陷

一、什么是高度塌陷

在文档流中，当父元素没有设置高度的时候，父元素的高度就取决于子元素的高度，也就是常常说的“由子元素撑开”。当子元素设置为浮动，脱离了文档流，这时候就会造成父元素的高度塌陷，因为没有子元素“撑着它的高度”。这样会导致父元素后面的元素往上移，造成布局混乱。那么应该怎么解决咧？

二、解决办法

1. 在后面增加空的子元素，设置clear:both

• 要注意这个清除浮动的对象并不是“浮动的对象”，而是“受浮动影响的对象”,因此要在后面增加一个空的子元素。
• 缺点：增加了无意义的标签，不符合我们标签语义化的要求，有违结构与表现的分离。

这里我开始理解错了，设置成了父元素的清除浮动。这是错误的。本身父元素就是因为子元素而造成的高度塌陷，清除浮动是针对受浮动元素影响而环绕在其周围的元素。通过对冗余元素设置清除浮动，冗余元素会躲开浮动元素不被其遮盖，而父元素为了包裹住它自然就被撑开了。

2. 对第一种方法的优化：使用伪元素选择器，内容生成：
   
   #parent::after{
   
   content:"";
   
   display:block;
   
   clear:both;
   
   }

3. 给父元素创建BFC，这样它就可以包含浮动元素啦。（不清楚BFC的可以看一下我之前的笔记）,比如：

• overflow:hidden，可能会导致内容截胡或者出现滚动条
• display:inline-block，父元素宽度会丢失

4. 给父元素设置height
5. 给父元素也设置float，可是这样蛮鸡肋的，会影响父元素相邻的元素。

目前比较好的方法是使用伪元素的方法。不然为了解决高度塌陷而给它增加冗余的标签或者设置为inline-block、浮动、绝对定位等，不利于页面标签的管理或者反而会影响到其它元素的布局。