CSS盒子塌陷问题解决方案
2016-10-07 16:03
417 查看
什么是盒子塌陷?
外部盒子本应该包裹住内部的浮动盒子,结果却没有。
问题出现的原因
父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度(height)属性,或者设置了为auto,就会出现这种情况,如果父元素不包含任何的可见背景,这个问题会很难被注意到。
因为子元素设置了float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。
解决方案
上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。
在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素,把
缺点:引入了冗余元素
用overflow:hidden清除浮动
给外部盒子添上这个属性就好了,非常简单。
缺点:有可能造成溢出元素不可见,影响展示效果。
用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性,再隐藏它
这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。
这也是bootstrap框架采用的清除浮动的方法。
题外话
其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。
外部盒子本应该包裹住内部的浮动盒子,结果却没有。
问题出现的原因
父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度(height)属性,或者设置了为auto,就会出现这种情况,如果父元素不包含任何的可见背景,这个问题会很难被注意到。
因为子元素设置了float属性,而float属性会把元素从标准文档流中抽离,直接结果就是外部盒子丢了两个孩子,因为内部没有其它盒子了,所以外部盒子只包裹文本节点内容,却把两个内部盒子扔在外面了。
解决方案
上面分析了问题出现的原因,不难找到第一种解决方案(既然孩子丢了,那就去找呗)——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离,让它和孩子们见面。
缺点:可读性差,不易于维护(别人很难理解为什么要给父元素也添上float),而且可能需要调整整个页面布局。
在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素,把
<div style="clear:both;"></div>放在盒内底部,用最下面的空盒子清除浮动,把盒子重新撑起来。
缺点:引入了冗余元素
用overflow:hidden清除浮动
给外部盒子添上这个属性就好了,非常简单。
缺点:有可能造成溢出元素不可见,影响展示效果。
用after伪元素清除浮动
给外部盒子的after伪元素设置clear属性,再隐藏它
这其实是对空盒子方案的改进,一种纯CSS的解决方案,不用引入冗余元素。
.clearfix {*zoom: 1;} .clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";} .clearfix:after {clear: both;}
这也是bootstrap框架采用的清除浮动的方法。
题外话
其实还有一种最直接的办法:给每个盒子规定width和height,要多大给多大即可。但这并不算什么解决方案,因为这样的布局不是内容自适应的,但如果页面内容极少发生变动,这也是一个不错的方案,因为它的兼容性是毋庸置疑的。
相关文章推荐
- CSS高度塌陷问题解决方案
- 盒子的margin塌陷问题解决方案(嵌套盒子出现margin无效)
- CSS之高度塌陷问题解决方案
- DIV+CSS中图片和文字混排居中问题解决方案
- css盒子塌陷的几种解决方法
- Css中margin塌陷与合并问题与解决办法
- CSS之解决高度塌陷问题(三)
- CSS常见兼容问题解决方案
- IE与FF不兼容网页布局CSS问题解决方案()
- CSS中,margin-top塌陷问题的解决
- css ios H5页面web页面 上下滑动卡顿问题解决方案(亲测)
- 解决WEB对js、css缓存问题的一种可行方案
- CSS盒子塌陷的5种解决方法
- java web项目发版js或css缓存问题解决方案
- CSS常见兼容问题解决方案(持续更新)
- W3C对于CSS及浏览器之间的兼容性问题解决方案
- CSS FireFox and IE 换行问题解决方案
- CSS中float造成的浮动“塌陷”问题的解决办法
- CSS之解决高度塌陷问题方法终极版
- css ios H5页面web页面 上下滑动卡顿问题解决方案