CSS中高度塌陷

CSS中高度塌陷

1.高度塌陷产生的原因：子元素浮动，父元素高度自适应。

2.解决方法：
（1）给父元素添加overflow：hidden；
优点：简单易写
缺点：如果父元素中有内容溢出会被裁切掉。
（2）给浮动的元素后边添加一个空div,设置clear:both;为了防止往空div里添加内容，加上height:0;overflow:hidden;
优点：如果父元素中有内容溢出不会被裁切
缺点：不利于SEO（搜索引擎的优化）
SEO喜欢结构清晰的页面，结构越简单越好，能用一个标签，不用两个标签。
（3）万能清除法，父元素:after{content:"111"; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
优点：有利于SEO，溢出不会被裁剪
缺点：复杂，不易记

visibility:hidden;也是实现隐藏。但是会保留位置。