解决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 时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

总结:

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值