全球访问量最大的10个网站,自己做免费网站,goodstore wordpress,英文wordpress 安装[css] 清除浮动的方式有哪些及优缺点#xff1f;
什么是盒子塌陷#xff1f;
外部盒子本应该包裹住内部的浮动盒子#xff0c;结果却没有。问题出现的原因
父元素只包含浮动元素#xff0c;那么它的高度就会塌缩为零#xff08;前提就是你们没有设置高度#xff08;heig…[css] 清除浮动的方式有哪些及优缺点
什么是盒子塌陷
外部盒子本应该包裹住内部的浮动盒子结果却没有。问题出现的原因
父元素只包含浮动元素那么它的高度就会塌缩为零前提就是你们没有设置高度height属性或者设置了为auto就会出现这种情况如果父元素不包含任何的可见背景这个问题会很难被注意到。
因为子元素设置了float属性而float属性会把元素从标准文档流中抽离直接结果就是外部盒子丢了两个孩子因为内部没有其它盒子了所以外部盒子只包裹文本节点内容却把两个内部盒子扔在外面了。解决方案上面分析了问题出现的原因不难找到第一种解决方案既然孩子丢了那就去找呗——给外部盒子也添加浮动把外部盒子也从标准文档流中抽离让它和孩子们见面。
缺点可读性差不易于维护别人很难理解为什么要给父元素也添上float而且可能需要调整整个页面布局。在外部盒子内最下方添上带clear属性的空盒子可以是div也可以是其它块级元素把 div styleclear: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要多大给多大即可。但这并不算什么解决方案因为这样的布局不是内容自适应的但如果页面内容极少发生变动这也是一个不错的方案因为它的兼容性是毋庸置疑的。个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
