CSS: Clearing Floats with Overflow

使用基于float的布局进行编码时,我们面临的常见问题之一是包装容器不会扩展到子浮动元素的高度。解决此问题的典型解决方案是在浮动元素后添加一个带有 clear float 的元素。但是您知道吗,您也可以使用 overflow 属性来解决此问题?这也不是一个新的 CSS 技巧。很久很久以前就已经有记录了。今天,我想重新审视这个话题以及一些提示。

Clear Float 演示

下面的演示显示了父容器不展开的浮动子元素的问题。要解决此问题,您只需将 CSS 属性 overflow:auto(或 overflow:hidden)添加到包装容器中即可。这可能是清除浮点数的最简单方法。

相关推荐
liangmou21214 分钟前
HTML5的笔记
前端·笔记·html·html5
MurphyChen12 分钟前
前端请求进化史 :从 Form 到 Server Actions 🚀
前端·javascript·面试
兰德里的折磨55027 分钟前
基于若依和elementui实现文件上传(导入Excel表)
前端·elementui·excel
喝拿铁写前端30 分钟前
一个列表页面,初级中级高级前端之间的鸿沟就显出来了
前端·架构·代码规范
magic 2451 小时前
ES6变量声明:let、var、const全面解析
前端·javascript·ecmascript·es6
M_chen_M2 小时前
es6学习02-let命令和const命令
前端·学习·es6
好_快2 小时前
Lodash源码阅读-dropWhile
前端·javascript·源码阅读
M_chen_M2 小时前
JS6(ES6)学习01-babel转码器
前端·学习·es6
好_快2 小时前
Lodash源码阅读-dropRightWhile
前端·javascript·源码阅读
二川bro2 小时前
Vue 项目中 package.json 文件的深度解析
前端·vue.js·json