前言在 CSS 发展的早期如果你想要一个两栏、三栏的页面布局答案几乎只有一个Float浮动。那个年代float属性撑起了 Web 布局的半壁江山无数开发者为了一个圣杯布局或双飞翼布局绞尽脑汁。时过境迁Flexbox 和 Grid 已经成为现代布局的主力军但 Float 并没有消失——它回到了自己最初的使命文字环绕。理解 Float 不仅是为了看懂历史代码更是因为它所触发的 BFC、清除浮动等概念依然是 CSS 底层的重要知识。目录一、Float 的原始使命文字环绕二、Float 的核心规则2.1 三个可选值2.2 浮动的关键行为2.3 浮动的部分脱离特性三、清除浮动Float 布局的核心难题3.1 clear 属性3.2 父容器高度塌陷四大解决方案方案1额外标签法最原始方案2overflow: hidden经典 hack方案3伪元素清除法clearfix方案4display: flow-root现代最优解四、Float 布局的经典实战4.1 两栏布局侧边栏 主内容4.2 三栏布局圣杯布局4.3 文字环绕Float 的正确打开方式五、Float 在现代 CSS 中的定位5.1 什么时候该用 Float5.2 Float vs Flexbox vs Grid六、常见浮动问题排查清单七、总结一、Float 的原始使命文字环绕float属性在设计之初只有一个目的实现报纸式的文字环绕图片效果。style .float-left { float: left; width: 200px; margin-right: 16px; margin-bottom: 12px; border-radius: 8px; } .article { font-size: 15px; line-height: 1.8; color: #333; } /style article classarticle img classfloat-left srchttps://picsum.photos/200/150 alt配图 p在古老的森林深处阳光透过层层叠叠的树叶在地上洒下斑驳的光影。微风吹过树叶沙沙作响仿佛大自然在低声吟唱一首古老的歌谣。这里的一切都充满了生机与神秘.../p p河水静静地流淌倒映着两岸郁郁葱葱的树木。偶尔有鱼儿跃出水面激起一圈圈涟漪打破了水面的宁静。/p /article效果就是图片浮动到左侧文字会围绕图片流动——就像报纸上常见的那种排版。这个原始使命至今仍然是 Float 存在的最大理由。其他布局功能 Flexbox 和 Grid 都无法优雅地实现文字环绕效果。二、Float 的核心规则2.1 三个可选值值含义float: left元素浮动到容器左侧float: right元素浮动到容器右侧float: none默认值不浮动2.2 浮动的关键行为当你给一个元素设置float后会发生几件重要的事情style .float-demo { float: left; width: 150px; height: 150px; background: coral; } /style div classcontainer div classfloat-demo浮动元素/div div classnormal正常流元素/div /div行为1脱离标准流部分浮动元素脱离标准流——它不再占据原来的位置后面的块级元素会当作浮动元素不存在占据它原来的位置。但有一个独特的特性后面的行内内容文字、图片等会感知浮动元素并围绕它排列。行为2浮动定位边界浮动元素会移动直到它触碰到包含块的边缘或者另一个浮动元素的边缘。行为3父容器高度塌陷如果父容器中所有子元素都浮动了父容器的高度会变成0——因为从标准流的角度看它里面没有内容了。2.3 浮动的部分脱离特性这是 Float 最独特、也最容易混淆的特性style .float-box { float: left; width: 150px; height: 120px; background: coral; opacity: 0.8; } .text-box { background: #e3f2fd; padding: 10px; } /style div classcontainer div classfloat-box我是浮动的/div div classtext-box 这段文字会环绕浮动盒子。block box 本身占据了浮动盒子原本的位置所以蓝色背景会穿透到浮动盒子的背后但文字内容会避开浮动盒子排列。 /div /div用一张图来描述重点块盒无视浮动元素背景覆盖过去但行内内容尊重浮动元素绕开排列。这是理解 Float 行为的关键。三、清除浮动Float 布局的核心难题3.1clear属性clear用于让元素不环绕浮动元素/* 左清除元素会出现在所有左浮动元素的下方 */ .clear-left { clear: left; } /* 右清除 */ .clear-right { clear: right; } /* 双侧清除最常用 */ .clear-both { clear: both; }style .float-l { float: left; width: 45%; height: 100px; background: coral; } .float-r { float: right; width: 45%; height: 100px; background: lightblue; } .footer { clear: both; background: #333; color: white; padding: 20px; } /style div classfloat-l左栏/div div classfloat-r右栏/div div classfooter页脚 — clear: both 让我跑到所有浮动元素的下面/div3.2 父容器高度塌陷四大解决方案这是 Float 布局时代的头号难题。下面是解决方法的演进史方案1额外标签法最原始style .float-child { float: left; width: 200px; height: 150px; } /style div classparent div classfloat-child浮动1/div div classfloat-child浮动2/div div classfloat-child浮动3/div div styleclear: both;/div !-- ← 多一个无意义的空标签 -- /div❌缺点增加了无语义的空标签HTML 结构不干净。方案2overflow: hidden经典 hack.parent { overflow: hidden; /* 或 auto */ /* 触发 BFC让浮动元素参与高度计算 */ }✅优点纯 CSS不需要额外标签❌缺点会裁剪溢出的内容如弹出菜单、tooltip方案3伪元素清除法clearfix.clearfix::after { content: ; display: table; /* 或 block */ clear: both; }div classparent clearfix div classfloat-child浮动1/div div classfloat-child浮动2/div /div !-- 父容器正常包裹 --这是 Flexbox/Grid 诞生前的最主流方案流行了十多年。方案4display: flow-root现代最优解.parent { display: flow-root; /* CSS 专门为此创建 BFC 而生零副作用 */ }✅强烈推荐display: flow-root专门用来创建 BFC没有任何裁剪副作用是现代浏览器中清除浮动的最佳选择。唯一需要注意不兼容 IE11 及更早版本。四、Float 布局的经典实战4.1 两栏布局侧边栏 主内容两栏布局侧边栏 主内容!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title style .layout { /* display: flow-root; ← 可选如果子元素都浮动了就需要 */ } .sidebar { float: left; width: 250px; min-height: 400px; background: #2c3e50; color: white; padding: 20px; } .main-content { /* 方式A也浮动 */ float: left; width: calc(100% - 250px); min-height: 400px; background: #ecf0f1; padding: 20px; } /* 方式B触发BFC更推荐 */ .main-content-bfc { display: flow-root; min-height: 400px; background: #ecf0f1; padding: 20px; } .footer { clear: both; background: #333; color: white; text-align: center; padding: 15px; } /style /head body div classlayout aside classsidebar h3导航菜单/h3 ul li首页/li li关于我们/li li产品中心/li li联系我们/li /ul /aside main classmain-content-bfc h1主内容区域/h1 p这里使用 BFC 方式自动填充剩余宽度无需计算/p /main /div footer classfooter© 2025 My Website/footer /body /html4.2 三栏布局圣杯布局经典的圣杯布局——两侧固定中间自适应三栏布局圣杯布局!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title style * { margin: 0; box-sizing: border-box; } /* 圣杯容器左右预留侧边栏宽度 */ .holy-grail { /* 左栏宽180右栏宽200给父容器左右内边距腾出位置 */ padding: 0 200px 0 180px; } /* 清除浮动 */ .holy-grail::after { content: ; display: table; clear: both; } /* 中间主体100%宽度最先写在DOM最前面 */ .col-main { float: left; width: 100%; background: #e8f5e9; min-height: 400px; padding: 20px; } /* 左侧边栏 宽180px */ .col-left { float: left; width: 180px; /* 负100% 直接跑到主体最左侧 */ margin-left: -100%; /* 向左偏移自身宽度藏进父容器左内边距区域 */ left: -180px; position: relative; min-height: 300px; background: #fff3e0; padding: 20px; } /* 右侧边栏 宽200px */ .col-right { float: left; width: 200px; /* 负自身宽度跑到本行最右侧 */ margin-left: -200px; /* 向右偏移自身宽度藏进父容器右内边距区域 */ right: -200px; position: relative; min-height: 300px; background: #e3f2fd; padding: 20px; } /style /head body div classholy-grail !-- DOM顺序必须main 在前左右侧边在后 -- main classcol-main中间主内容自适应宽度/main aside classcol-left左侧栏180px/aside aside classcol-right右侧栏200px/aside /div /body /html现代建议如果你需要写这样的布局直接用 Grid 吧——grid-template-columns: 180px 1fr 200px一行搞定4.3 文字环绕Float 的正确打开方式这是 Float最正统的用法至今无出其右文字环绕Float 的正确打开方式!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title style .pull-quote { float: left; width: 280px; margin: 8px 24px 16px 0; padding: 20px 24px; font-size: 1.3em; font-style: italic; color: #e74c3c; border-left: 4px solid #e74c3c; background: #fdf2f2; } /style /head body article stylemax-width: 700px; line-height: 1.8; p网页设计不仅仅是关于代码.../p blockquote classpull-quote 设计不只是它看起来怎么样和感觉怎么样。设计是它是怎样工作的。—— 史蒂夫·乔布斯 /blockquote p 一个好的设计师需要同时考虑视觉美感与用户体验。视觉美感吸引用户的第一眼注意但真正让用户留下来的是流畅、直观的交互体验。每一个按钮的位置、每一处留白的大小都经过了反复推敲与测试.../p p 一个好的设计师需要同时考虑视觉美感与用户体验。视觉美感吸引用户的第一眼注意但真正让用户留下来的是流畅、直观的交互体验。每一个按钮的位置、每一处留白的大小都经过了反复推敲与测试.../p p 一个好的设计师需要同时考虑视觉美感与用户体验。视觉美感吸引用户的第一眼注意但真正让用户留下来的是流畅、直观的交互体验。每一个按钮的位置、每一处留白的大小都经过了反复推敲与测试.../p p 一个好的设计师需要同时考虑视觉美感与用户体验。视觉美感吸引用户的第一眼注意但真正让用户留下来的是流畅、直观的交互体验。每一个按钮的位置、每一处留白的大小都经过了反复推敲与测试.../p /article /body /html五、Float 在现代 CSS 中的定位5.1 什么时候该用 Float应该用 Float不应该用 Float文字环绕图片/引用页面整体布局首字下沉效果多列等高布局图片与说明文字排列导航栏排列小范围文字内的浮动元素复杂的对齐需求5.2 Float vs Flexbox vs Grid特性FloatFlexboxGrid核心目的文字环绕一维排列二维布局方向性左右主轴交叉轴行列垂直居中需要 hackalign-items: centeralign-items: center等高列需要 hack天然支持天然支持顺序控制困难order可控精确控制响应式困难较易最强六、常见浮动问题排查清单父容器高度不见了→ 触发父容器的 BFCdisplay: flow-root元素跑到了奇怪的位置→ 检查前一个元素是否浮动考虑clear两栏布局裂开→ 检查总宽度是否溢出包括 margin/padding/border浮动元素重叠→ 检查宽度设置用clear控制换行文字环绕不符合预期→ 调整 margin 控制间距在不想环绕的元素上加clear七、总结Float 是 CSS 发展史上的一个重要章节。它从文字环绕起家被开发者Hack成了全能的布局工具又随着 Flexbox 和 Grid 的成熟而回归初衷。记住这几句话Float 的本职是文字环绕请优先用 Flexbox/Grid 做页面布局display: flow-root是现代最优雅的清除浮动方式Float 的部分脱离流特性块盒无视文字环绕是理解一切浮动问题的关键能读懂 Float 的圣杯/双飞翼布局是前端工程师的基本素养——因为历史代码中遍地都是写在最后本文是博主根据自己所学整理的期间也查阅了一些资料文中观点仅为个人学习心得仅供大家参考交流不喜勿喷。若觉得内容对你有所帮助期待点赞支持一下往期文章CSS布局基石 —— 盒模型与标准流Linux 学习笔记 03一文读懂 Linux 包管理工具Linux 学习笔记 02一文读懂 Linux 目录结构Linux 学习笔记 01一文读懂 Linux 发展简史想要专属看板娘手把手教你搭建 API 并完成部署