解决CSS盒子塌陷的方法

一：文本塌陷的原因：

在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离就会无法撑起父元素的高度，导致父元素的高度丢失。

 比如说如下的案例：

由此可以看到当父元素的高度塌陷后，下面的子元素都向上移动了，其完全脱离文档流

二：解决文本塌陷的方法

方法一：给父级 div 定义 height

原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

方法二：结尾处加空 div 标签 clear:both

原理：添加一个空 div ，利用 css 提高的 clear:both 清除浮动，让父级 div 能自动获取到高度

优点：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空 div ，让人感觉很不爽

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方法三：父级 div 定义伪类:after 和 zoom

原理： IE8 以上和非 IE 浏览器才支持 :after ，原理和方法 2 有点类似， zoom(IE 转有属性 ) 可解决 i

e6,ie7 浮动问题

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持

建议：推荐使用，建议定义公共类，以减少 CSS 代码

方法四：父级 div 定义 overflow:hidden

原理：必须定义 width 或 zoom:1 ，同时不能定义 height ，使用 overflow:hidden 时，浏览器会自

动检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：不能和 position 配合使用，因为超出的尺寸的会被隐藏

建议：只推荐没有使用 position 或对 overflow:hidden 理解比较深的朋友使用

方法五：父级 div 定义 overflow:auto

原理：必须定义 width 或 zoom:1 ，同时不能定义 height ，使用 overflow:auto 时，浏览器会自动

检查浮动区域的高度

优点：简单，代码少，浏览器支持好

缺点：内部宽高超过父级 div 时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

总结：

父元素里的子元素会浮动的情况下，要注意高度塌陷问题并解决，这里推荐使用第二钟解决方法