一:文本塌陷的原因:
在浮动布局中,父元素的高度默认被子元素撑开,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离就会无法撑起父元素的高度,导致父元素的高度丢失。
比如说如下的案例:
由此可以看到当父元素的高度塌陷后,下面的子元素都向上移动了,其完全脱离文档流
二:解决文本塌陷的方法
方法一:给父级 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
时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
总结:
父元素里的子元素会浮动的情况下,要注意高度塌陷问题并解决,这里推荐使用第二钟解决方法