浮动害我加班三天？前端小白必看的float避坑指南
浮动害我加班三天？前端小白必看的float避坑指南
- 浮动害我加班三天？前端小白必看的float避坑指南
- 那年我被float整崩溃了
- 这玩意儿最初根本不是用来干活的
- 一旦用了float，你的元素就变成"幽灵"了
- 父容器塌陷：每个前端都躲不过的噩梦
- 清除浮动的江湖野史：从蛮荒时代到现代文明
- 第一式：空div清浮动（石器时代的解法）
- 第二式：overflow:hidden 暴力撑开（青铜时代的偏方）
- 第三式：伪元素 ::after 优雅清浮动（现代标准解法）
- overflow:hidden 的陷阱：那些年被裁掉的功能
- 都2024年了，float还有存在的必要吗？
- 场景一：老项目的屎山代码
- 场景二：特定的文字环绕效果
- 场景三：兼容性的最后防线
- 遇到浮动问题别急着砸键盘，按这个套路排查
- 第一步：确认是不是真的塌陷了
- 第二步：看有没有清浮动
- 第三步：检查浮动方向
- 第四步：检查margin折叠和重叠
- 第五步：终极方案——上!important调试法
- 几个让你少熬两夜的实战技巧
- 技巧1：全局clearfix，一劳永逸
- 技巧2：IE兼容性处理（虽然不想提，但以防万一）
- 技巧3：响应式时代的float处理
- 技巧4：用现代工具替代，但保留float知识
- 技巧5：快速生成clearfix的Snippets
- 你以为这就完了？上周我还靠它救了个老后台
浮动害我加班三天？前端小白必看的float避坑指南
那年我被float整崩溃了
说实话，我现在看到 float 这个词，膝盖还会条件反射性地发软。不是夸张，是真的有PTSD。
那是2020年的冬天，我刚从前端培训班"毕业"（懂的都懂，就是那种三个月速成班），踌躇满志地进了家创业公司。入职第二天，老板拍着我肩膀说：“小王啊，咱们官网要改版，你做个三栏布局，左边导航，中间内容，右边广告位，今天能上线吧？”
我说"没问题"，声音洪亮，底气十足。毕竟培训班老师教过，三栏布局嘛，左浮一个，右浮一个，中间自适应，简单！
于是我噼里啪啦敲代码：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个三栏布局title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
border: 2px solid #333; /* 加个边框方便看效果 */
}
.left {
float: left;
width: 200px;
background: #ff6b6b;
height: 300px;
}
.right {
float: right;
width: 250px;
background: #4ecdc4;
height: 300px;
}
.middle {
background: #ffe66d;
height: 300px;
/* 中间栏我没写浮动，想着自适应就行 */
}
.footer {
height: 100px;
background: #1a535c;
color: white;
}
style>
head>
<body>
<div class="container">
<div class="left">我是左侧导航div>
<div class="right">我是右侧广告div>
<div class="middle">我是中间内容区域，应该自适应宽度div>
div>
<div class="footer">我是页脚，应该在底部div>
body>
html>
保存，刷新浏览器——我当场就懵了。页脚呢？我的页脚怎么跑到中间内容的后面去了？而且中间那个黄色的块怎么变得那么窄？更诡异的是，我给父容器 container 加的黑色边框，怎么变成了一条线，里面三个有颜色的块像是在空中飘着？
我疯狂检查代码，以为是什么语法错误，改了半天，越改越乱。最后发现父容器高度是0，对，你没看错，三个子元素明晃晃地在那儿，父容器觉得自己"肚子里没人"，直接躺平了。
那天我加班到十一点，一边改一边骂，一边骂一边查MDN。后来我才知道，这叫"浮动塌陷"，是前端界的经典老坑。今天这篇文章，就是把我当年踩过的屎、流过的泪、砸过的键盘，全部整理出来，让你们少走点弯路。
这玩意儿最初根本不是用来干活的
很多人学 float 有个误区，觉得它是布局神器。错！大错特错！
float 这属性1996年就出生了，比在座很多程序员年纪都大。它最开始的设计初衷特别单纯——让图片漂在文字旁边。就像你看报纸杂志，一张配图放在左上角，文字绕着它排版，这就是 float 的老本行。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>这才是float的正经用法title>
<style>
.article {
width: 600px;
margin: 50px auto;
line-height: 1.8;
font-size: 16px;
}
.article img {
float: left; /* 图片往左飘 */
margin: 0 20px 10px 0; /* 右边和下边留点空隙，不然文字贴太紧 */
width: 200px;
border-radius: 8px;
}
.article p {
margin-bottom: 15px;
text-align: justify; /* 文字两端对齐，看起来更专业 */
}
style>
head>
<body>
<div class="article">
<img src="https://picsum.photos/200/150" alt="示例图片">
<p>
这是一段演示文字。你看，图片在左边飘着，文字自动绕着它走，这就是float最原始的用法。
当年CSS还没这么复杂的时候，大家就是靠这个实现图文混排的。文字会巧妙地避开图片，
就像水绕过石头一样自然。如果你把float改成right，图片就会跑到右边去，文字从左边开始绕。
p>
<p>
注意到没有？图片下面的文字不会钻到图片底下去，而是乖乖地跟在图片底部后面继续排列。
这种特性叫做"文字环绕"，是float的天生技能。但问题来了——当年那些前端前辈们发现，
既然能让图片左飘右飘，那能不能让div也飘起来？能不能用float做整个网页的布局？
p>
<p>
于是他们开始了探索，也开始了被float折磨的漫长岁月。在没有Flexbox、没有Grid的年代，
float就是唯一的救命稻草。你想做两栏布局？左浮动一个，右浮动一个。三栏？继续加浮动。
但float这玩意儿毕竟不是为布局设计的，强行拿来用，坑多得能埋人。
p>
div>
body>
html>
你看，这才是 float 该干的事。但那时候的程序员们没办法啊，2009年Flexbox才出来，2017年Grid才普及，中间这十几年大家怎么活？只能拿 float 硬撑。于是各种hack技巧层出不穷， clearfix 的写法少说也有十几种变种，江湖人称"清除浮动的十八般武艺"。
一旦用了float，你的元素就变成"幽灵"了
好，咱们来点硬核的，说说 float 到底对元素做了什么伤天害理的事。
当你给一个元素加上 float: left 或 float: right，它立马就脱离普通文档流了。啥意思呢？想象一下，你和同事们排队买奶茶，突然你学会了轻功，飘到了天花板上。地面上的队伍继续往前排，但他们看不见你，也不觉得这里有人插队。然而，卖奶茶的阿姨（文字内容）抬头一看，“哟，这儿还飘着个人”，于是她会绕着你递奶茶。
这就是 float 最反直觉的地方：块级元素无视你，行内元素绕着你。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>float的幽灵特性演示title>
<style>
.box {
width: 400px;
border: 3px solid #333;
padding: 10px;
}
.floater {
float: left;
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin-right: 15px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 8px;
}
.block-element {
background: #ff6b6b;
padding: 20px;
color: white;
font-weight: bold;
/* 注意：我没清浮动，所以它会和float元素重叠 */
}
.text-content {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
}
/* 看看行内元素的表现 */
.inline-box {
display: inline-block;
background: #4ecdc4;
padding: 10px;
margin: 5px;
}
style>
head>
<body>
<h2>场景一：块级元素的无视行为（这是坑！）h2>
<div class="box">
<div class="floater">我浮动了div>
<div class="block-element">
我是块级元素，我看不到上面的浮动元素，我会直接顶上去，结果就会重叠！
你看我的背景色是不是盖住了浮动元素的一部分？这就是文档流的残酷。
div>
div>
<h2 style="margin-top: 30px;">场景二：行内元素和文字的环绕行为h2>
<div class="box">
<div class="floater">我浮动了div>
<div class="text-content">
我是普通文本内容，我"看得到"浮动元素，会乖乖地绕着它排列。
你看这些文字是不是巧妙地避开了左边的紫色方块？这就是float的文字环绕特性。
就算写很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
的文字，也会一直绕着走，直到超出浮动元素的高度范围，才会占据整行宽度。
div>
div>
<h2 style="margin-top: 30px;">场景三：行内块级元素的表现h2>
<div class="box">
<div class="floater">我浮动了div>
<span class="inline-box">行内元素1span>
<span class="inline-box">行内元素2span>
<span class="inline-box">行内元素3span>
<span class="inline-box">行内元素4span>
<span class="inline-box">行内元素5span>
div>
body>
html>
上面这个例子你复制下来跑一遍，就会发现：
- 第一个场景里，红色的块级元素完全无视了紫色浮动元素，直接盖上去了，文字内容如果不多就会被遮住；
- 第二个场景里，文字像流水一样绕着浮动块走；
- 第三个场景里，那些
inline-block的小方块也会绕着浮动元素排列。
所以记住这个血淋淋的教训：用了 float 之后，一定要考虑后面元素的感受！ 不然就会像我当年那样，页脚飞到天上去了。
父容器塌陷：每个前端都躲不过的噩梦
好，咱们来讲讲最经典的坑——父容器高度塌陷。
这事的诡异之处在于：你从视觉上明明看到父容器里有三个子元素，但浏览器告诉你，父容器高度是0。就像你明明吃了三碗饭，体重秤显示你体重没变化一样离谱。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>父容器塌陷惨案现场title>
<style>
/* 这就是那个"消失"的父容器 */
.parent {
border: 5px solid #e74c3c; /* 红色粗边框，够显眼吧 */
background: #ecf0f1; /* 浅灰背景 */
padding: 10px;
/* 注意：我没给高度，也没清浮动 */
}
.child-1 {
float: left;
width: 30%;
height: 150px;
background: #3498db;
margin: 5px;
}
.child-2 {
float: left;
width: 30%;
height: 150px;
background: #2ecc71;
margin: 5px;
}
.child-3 {
float: left;
width: 30%;
height: 150px;
background: #f39c12;
margin: 5px;
}
/* 下面这个兄弟就惨了 */
.unlucky-brother {
background: #9b59b6;
color: white;
padding: 20px;
font-size: 18px;
}
/* 看看计算后的高度 */
.debug-info {
margin-top: 20px;
padding: 15px;
background: #34495e;
color: #ecf0f1;
font-family: monospace;
}
style>
head>
<body>
<h2>案发现场：三个子元素都在，但父容器高度为0h2>
<div class="parent" id="collapsedParent">
<div class="child-1">div>
<div class="child-2">div>
<div class="child-3">div>
div>
<div class="unlucky-brother">
我是个无辜的页脚/下一个区块，但我以为上面没人，所以顶上去了...
结果我就和上面那三个色块重叠了！老板看到要扣钱的！
div>
<div class="debug-info">
父容器实际高度（通过JS获取）: <span id="heightDisplay">计算中...span>
div>
<script>
// 用JS获取真实高度，让你看看什么叫"塌陷"
const parent = document.getElementById('collapsedParent');
const display = document.getElementById('heightDisplay');
// 获取各种高度值
const height = parent.offsetHeight;
const clientHeight = parent.clientHeight;
const scrollHeight = parent.scrollHeight;
display.innerHTML = `
offsetHeight: ${height}px,
clientHeight: ${clientHeight}px,
scrollHeight: ${scrollHeight}px
（明明三个子元素加起来有150px，父容器却觉得自己是${height}px）
`;
script>
body>
html>
你跑一下这段代码，会发现红色边框的父容器变成了一条线，三个色块像违章建筑一样飘在外面。下面的紫色页脚直接顶上去了，跟色块们重叠在一起。JS会告诉你，父容器高度可能只有20px左右（ padding 撑起来的），而不是你期待的150px+。
为啥会这样？ 因为三个子元素都 float 了，它们觉得自己"不在父容器里住了"，父容器一看"哟，肚子里没东西啊"，就缩成一条线了。这就像是三个租户都办了"暂住证浮动版"，房东以为房子空了，就把门给封了。
这个问题不解决，后面所有元素都会乱套。所以接下来咱们必须聊聊清除浮动这门保命手艺。
清除浮动的江湖野史：从蛮荒时代到现代文明
清除浮动的历史，就是一部前端人的血泪进化史。我给你梳理一下这些年大家都用过哪些招，以及哪些现在还在用。
第一式：空div清浮动（石器时代的解法）
最早的时候，大家是这么干的：
<div class="parent">
<div class="float-left">左浮动div>
<div class="float-right">右浮动div>
<div style="clear: both;">div>
div>
对应的CSS：
.clear {
clear: both; /* 我不浮动，我专门清除浮动 */
height: 0; /* 最好设为0，不然会多出空隙 */
overflow: hidden;
}
这招管用吗？管用。优雅吗？一点也不！你在HTML里加了个毫无语义的空div，就为了CSS的布局问题，这就像为了修窗户把墙砸了再砌上，属于伤敌一千自损八百。
而且万一你忘了加这个div，或者别人维护代码时觉得"这啥玩意儿删了算了"，Bug立马重现。所以现在千万别用这招，除非你在维护一个十年前的老项目，而且老板不让你重构。
第二式：overflow:hidden 暴力撑开（青铜时代的偏方）
后来有人发现，给父容器加个 overflow: hidden 或 overflow: auto， magically，父容器就认识自己的儿子了！
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow清浮动演示title>
<style>
.parent-fixed {
border: 5px solid #e74c3c;
background: #ecf0f1;
overflow: hidden; /* 就是这行代码！ */
/* 或者用 overflow: auto; 也可以 */
}
.child {
float: left;
width: 30%;
height: 150px;
background: #3498db;
margin: 5px;
}
.next-section {
background: #2ecc71;
color: white;
padding: 20px;
margin-top: 20px;
}
style>
head>
<body>
<h2>用了overflow:hidden，父容器终于恢复正常了h2>
<div class="parent-fixed">
<div class="child">div>
<div class="child">div>
<div class="child">div>
div>
<div class="next-section">
这次我不会顶上去了，因为上面的父容器有了高度，把我挤在下面呢。
div>
body>
html>
原理是啥？ 这涉及到BFC（Block Formatting Context，块级格式化上下文）的概念。简单说，当元素设置了 overflow 不为 visible 时，它会创建一个新的BFC，而这个BFC的特点是：会包裹住里面的浮动元素。
这招简单吧？简单。但有巨大的副作用：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow的副作用：裁剪惨案title>
<style>
.parent-with-overflow {
width: 300px;
height: 200px;
border: 3px solid #333;
overflow: hidden; /* 为了清浮动加的 */
position: relative;
}
.float-box {
float: left;
width: 100px;
height: 100px;
background: #3498db;
}
/* 假设这里有个下拉菜单 */
.dropdown {
position: absolute;
top: 80px;
left: 50px;
width: 150px;
background: white;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 100;
/* 这个菜单应该飘出去，但是... */
}
.dropdown-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.dropdown-item:hover {
background: #f5f5f5;
}
style>
head>
<body>
<h3>悲剧：下拉菜单被裁掉了h3>
<div class="parent-with-overflow">
<div class="float-box">浮动元素div>
<div class="dropdown">
<div class="dropdown-item">菜单项1div>
<div class="dropdown-item">菜单项2div>
<div class="dropdown-item">菜单项3div>
<div class="dropdown-item">菜单项4div>
<div class="dropdown-item">菜单项5div>
div>
div>
<p style="color: #e74c3c; margin-top: 10px;">
看到没？下拉菜单下面被截断了！因为父容器设置了overflow:hidden，
所有超出部分都会被无情地切掉。这时候你就懵逼了：清浮动和显示下拉菜单，只能二选一？
p>
body>
html>
看到没？如果你用了 overflow: hidden，子元素但凡有点弹出层、下拉菜单、tooltip 啥的，超出父容器边界的部分直接给你切掉，连个招呼都不打。这时候你就陷入两难：不清浮动父容器塌陷，清了浮动功能残缺。
所以这招虽然简单，但有毒，用之前得掂量掂量你的页面里有没有那些爱"出界"的元素。
第三式：伪元素 ::after 优雅清浮动（现代标准解法）
终于，来到了我们这个时代的主流方案——伪元素清除法。这大概是当前最优雅、最无副作用的清浮动方式了。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Clearfix终极解决方案title>
<style>
/*
* 这是业界通用的clearfix写法
* 建议你把这个类定义在全局CSS里，比如base.css或者reset.css
* 以后只要父容器可能塌陷，就加个class="clearfix"完事
*/
.clearfix::after {
content: ""; /* 必须写，不然伪元素不显示 */
display: block; /* 必须写，clear只对块级元素有效 */
clear: both; /* 核心：清除左右浮动 */
height: 0; /* 防止有些浏览器给伪元素默认高度 */
visibility: hidden; /* 隐藏这个伪元素，虽然透明但保险起见 */
}
/* 照顾一下IE6/7这些老古董，虽然2024年了应该没人用了...吧？ */
.clearfix {
*zoom: 1; /* IE6/7的hasLayout hack，星号是IE6/7专属语法 */
}
/* 实际使用示例 */
.layout-container {
border: 5px solid #e74c3c;
background: #ecf0f1;
padding: 10px;
}
.sidebar {
float: left;
width: 200px;
height: 300px;
background: #3498db;
border-radius: 8px;
}
.main-content {
float: right;
width: 600px;
height: 300px;
background: #2ecc71;
border-radius: 8px;
}
.footer {
margin-top: 20px;
padding: 20px;
background: #9b59b6;
color: white;
border-radius: 8px;
}
style>
head>
<body>
<h2>使用clearfix后，一切都正常了h2>
<div class="layout-container clearfix">
<div class="sidebar">左侧栏div>
<div class="main-content">主内容区div>
div>
<div class="footer">
页脚安全地呆在下面，不会跑上去重叠了。而且overflow的问题也不存在，
如果主内容区里有个下拉菜单要飘出去，完全没问题！
div>
<div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
<h3>原理解析：h3>
<p>1. ::after是在元素内容的最后插入一个伪元素p>
<p>2. 这个伪元素是块级元素（display:block），并且清除了浮动（clear:both）p>
<p>3. 因为它在文档流里，父容器为了包裹它，必须扩展高度p>
<p>4. 它又清除了浮动，所以不会被前面的浮动元素影响位置p>
<p>5. 最终效果：父容器高度被撑开，且不需要额外的HTML标签p>
div>
body>
html>
这段代码里的 .clearfix 类，建议你直接抄到你的项目公共样式里去，这是目前最标准的做法。它有几个优点：
- 纯CSS解决：不污染HTML结构，没有多余的空div；
- 无副作用：不会像
overflow: hidden那样裁剪内容； - 可复用：哪里塌陷加哪里，so easy；
- 兼容性好：现代浏览器全支持，IE8+也支持（虽然IE8已经进博物馆了）。
当然，这个写法也有变种，比如有人喜欢用 display: table 而不是 display: block，据说能更好地处理一些margin相关的问题，但 block 已经够用了：
/* 另一种clearfix写法，用table */
.clearfix::after {
content: "";
display: table; /* 有人说这个更稳 */
clear: both;
}
/* 还有更简洁的（但不支持IE8） */
.clearfix::after {
content: "";
display: block;
clear: both;
}
记住，写代码不是炫技，选一种在你的项目里能跑的就行，别为了"最佳实践"搞得太复杂。
overflow:hidden 的陷阱：那些年被裁掉的功能
前面提了一嘴 overflow: hidden 的副作用，这里必须详细展开说说，因为我见过太多人在这个坑里摔得鼻青脸肿。
事情是这样的：2018年我在一家电商公司，商品列表页用了 overflow: hidden 清浮动。当时看着一切正常，直到测试小姐姐跑过来：“快看！商品详情浮层显示不全！”
我跑过去一看，鼠标hover到商品卡片上，应该弹出一个大图预览浮层，结果浮层下半截没了，就像被一把无形的刀切掉了。折腾半天才发现，父容器用了 overflow: hidden，浮层虽然设置了 position: absolute，但只要超出父容器边界，照样给你裁得干干净净。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow:hidden的悲惨案例合集title>
<style>
/* 案例1：下拉菜单被裁 */
.case1-container {
width: 300px;
border: 2px solid #333;
overflow: hidden; /* 为了清浮动 */
margin-bottom: 50px;
}
.case1-float {
float: left;
width: 100%;
height: 50px;
background: #3498db;
}
.case1-menu {
position: relative;
}
.case1-dropdown {
position: absolute;
top: 40px;
left: 0;
width: 100%;
background: white;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000; /* 即使z-index再高也没用 */
}
.case1-dropdown p {
padding: 10px;
margin: 0;
border-bottom: 1px solid #eee;
}
/* 案例2：tooltip提示框被裁 */
.case2-container {
width: 200px;
height: 100px;
border: 2px solid #e74c3c;
overflow: hidden;
position: relative;
margin-bottom: 50px;
}
.case2-box {
width: 100%;
height: 100%;
background: #ecf0f1;
display: flex;
align-items: center;
justify-content: center;
}
.case2-tooltip {
position: absolute;
top: -40px; /* 向上弹出 */
left: 50%;
transform: translateX(-50%);
background: #2c3e50;
color: white;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
}
/* 案例3：固定定位元素异常（虽然fixed不太受影响，但在特定场景下也会有问题） */
.case3-container {
width: 400px;
height: 200px;
border: 2px solid #27ae60;
overflow: hidden;
transform: translateX(0); /* 这里用了transform，会让fixed变成absolute的效果 */
}
.case3-fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #e74c3c;
color: white;
padding: 20px;
z-index: 9999;
}
style>
head>
<body>
<h2>案例1：下拉菜单半截入土h2>
<div class="case1-container">
<div class="case1-float">导航栏div>
<div class="case1-menu">
<div class="case1-dropdown">
<p>菜单项1p>
<p>菜单项2p>
<p>菜单项3p>
<p>菜单项4p>
<p>你看我被裁了吗？p>
div>
div>
div>
<p style="color: #e74c3c;">上面的下拉菜单应该显示5项，但只能看到一部分，剩下的被父容器吃掉了。p>
<h2>案例2：Tooltip提示框身首异处h2>
<div class="case2-container">
<div class="case2-box">
鼠标hover这里应该有提示
<div class="case2-tooltip">我是提示，但我头没了！div>
div>
div>
<p style="color: #e74c3c;">提示框想从上面弹出来，但overflow:hidden把超出部分切掉了。p>
<h2>案例3：Transform + Fixed的诡异组合h2>
<div class="case3-container">
<p>父容器有transform，里面的fixed定位会失效，变成absolutep>
<div class="case3-fixed">我应该fixed在视口中央，但被限制在父容器里了div>
div>
<div style="margin-top: 30px; padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107;">
<h3>总结：什么时候不能用overflow:hidden清浮动？h3>
<ul>
<li>✗ 子元素有absolute定位且可能超出父容器边界li>
<li>✗ 包含下拉菜单、日期选择器、tooltip等弹出层组件li>
<li>✗ 需要显示box-shadow外发光效果且范围较大时li>
<li>✗ 子元素需要负margin创造重叠效果时li>
<li>✗ 父容器本身需要设置border-radius，且子元素要贴边显示时li>
ul>
<p><strong>一句话：但凡你的布局里有"要飘出去"的元素，就别用overflow:hidden。strong>p>
div>
body>
html>
所以你看，overflow: hidden 虽然省事，但就是个临时工，干不了正式工的活。它适合用在那种"确定子元素不会越界"的场景，比如一个普通的文章列表，或者内部封闭的组件。但凡涉及到复杂的交互、弹出层、固定定位，赶紧换成 clearfix，别犹豫。
都2024年了，float还有存在的必要吗？
好，讲了这么多坑，你可能会问：既然Flexbox和Grid这么香，为什么还要学float？直接不用不行吗？
理想状态下，确实可以。但现实很骨感，我给你几个场景，看完你就明白为什么前端招聘JD里还写着"熟悉CSS布局，包括float"了。
场景一：老项目的屎山代码
去年我接了个外包，给某政府单位维护内部管理系统。你猜他们用啥写的？jQuery 1.8 + Bootstrap 2.3，全是float布局。我说"重构吧，用Flexbox"，对方技术负责人（其实是个快退休的老大哥）说：“小伙子，这系统2012年上线的，跑了十几年了，你敢动？出了事谁负责？”
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模拟老项目中的float布局title>
<style>
/* 这就是典型的Bootstrap 2.x时代的栅格系统思想 */
.container {
width: 940px; /* 固定宽度，居中 */
margin: 0 auto;
}
.row {
/* 老项目里的row，没有flex，全靠float */
margin-left: -20px; /* 抵消列的padding */
*zoom: 1; /* IE clearfix */
}
.row::after {
content: "";
display: table;
clear: both;
}
/* 列的基类 */
[class*="span"] {
float: left; /* 全是float！ */
margin-left: 20px;
}
/* 具体的列宽 */
.span3 { width: 220px; } /* 侧边栏 */
.span9 { width: 700px; } /* 主内容区 */
.span4 { width: 300px; } /* 三栏布局 */
.span6 { width: 460px; } /* 两栏布局 */
/* 样式美化 */
.sidebar {
background: #34495e;
color: white;
padding: 20px;
min-height: 400px;
}
.content {
background: #ecf0f1;
padding: 20px;
min-height: 400px;
}
.module {
background: white;
border: 1px solid #bdc3c7;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
style>
head>
<body>
<div class="container">
<h2>模拟2012年的Bootstrap 2.x布局风格h2>
<div class="row">
<div class="span3 sidebar">
<h3>导航菜单h3>
<p>用户管理p>
<p>权限设置p>
<p>系统日志p>
<p>数据报表p>
div>
<div class="span9 content">
<div class="row">
<div class="span6">
<div class="module">
<h4>统计图表h4>
<p>这里是一些数据可视化内容...p>
div>
div>
<div class="span6">
<div class="module">
<h4>最近活动h4>
<p>这里是操作日志...p>
div>
div>
div>
<div class="row">
<div class="span4">
<div class="module">
<h4>待办事项h4>
<p>3个审批等待处理p>
div>
div>
<div class="span4">
<div class="module">
<h4>通知公告h4>
<p>系统升级通知p>
div>
div>
<div class="span4">
<div class="module">
<h4>快捷操作h4>
<p>新增用户 | 导出报表p>
div>
div>
div>
div>
div>
div>
<div style="width: 940px; margin: 20px auto; padding: 20px; background: #fff3cd; border-left: 4px solid #ffc107;">
<p><strong>现实情况：strong>这种代码在今天看来确实老旧，但它在当时是最好的实践。你现在去改它，很可能牵一发而动全身。p>
<p>而且很多老系统还要兼容IE8/9，你跟他说Grid布局？他跟你说是"网格"还是"国网"。p>
div>
body>
html>
这就是现实。技术债不会因为你学会了新东西就自己消失。很多银行、保险、政府、国企的系统，跑得好好的，业务逻辑复杂得像蜘蛛网，你敢重构？运维半夜给你打电话的时候你就知道错了。
场景二：特定的文字环绕效果
有些设计效果，还真就只有 float 能比较自然地实现。比如这种杂志风格的图文混排：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>float在图文混排中的不可替代性title>
<style>
.magazine-layout {
max-width: 800px;
margin: 50px auto;
font-family: "Georgia", serif;
line-height: 1.8;
color: #333;
}
.magazine-layout h1 {
font-size: 2.5em;
margin-bottom: 0.5em;
color: #2c3e50;
}
.drop-cap {
float: left; /* 首字下沉效果 */
font-size: 4em;
line-height: 0.8;
padding-right: 10px;
color: #e74c3c;
font-weight: bold;
}
.inline-image {
float: right; /* 图片在右侧，文字环绕 */
width: 300px;
margin: 0 0 20px 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.inline-image-left {
float: left; /* 图片在左侧 */
width: 250px;
margin: 0 20px 20px 0;
border-radius: 8px;
}
.pull-quote {
float: right; /* 引用块在右侧 */
width: 250px;
padding: 20px;
margin: 0 0 20px 20px;
border-left: 4px solid #e74c3c;
background: #f8f9fa;
font-size: 1.2em;
font-style: italic;
color: #555;
}
.magazine-layout p {
margin-bottom: 1.5em;
text-align: justify;
}
/* shape-outside更高级，但兼容性不如float */
.shape-example {
float: left;
width: 200px;
height: 200px;
margin: 0 20px 20px 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%; /* 圆形 */
shape-outside: circle(50%); /* 文字沿圆形环绕，更高级 */
}
style>
head>
<body>
<article class="magazine-layout">
<h1>探索古老的CSS布局技术h1>
<p>
<span class="drop-cap">在span>
这个Flexbox和Grid横行的时代，我们似乎忘记了CSS最早的一些布局方式。float，这个曾经让无数前端开发者夜不能寐的属性，今天依然在某些特定场景下发光发热。你别看它老了，真要玩起文字环绕这种精细活，新手还真不一定能搞定。
p>
<img src="https://picsum.photos/300/200" alt="示例图片" class="inline-image">
<p>
你看右边的这张图片，文字自然地绕着它流动，这就是float的经典用法。如果用Flexbox或者Grid，你得把文字和图片分成两栏，然后手动控制文字在哪断行，麻烦得要死。而且float能做到文字自动避让，图片放左边就在左边环绕，放右边就在右边环绕，随时改，随时生效。
p>
<div class="pull-quote">
"Float不是过时了，只是回归了它的本职工作——图文混排。"
div>
<p>
再比如这种引用块（pull-quote）的效果，放在文章右侧，正文文字自动绕开。这在杂志排版里很常见，用float实现起来就几行代码。如果你硬要用Grid，得把文章切成好几段，分别放在不同的grid cell里，维护起来就是噩梦。
p>
<img src="https://picsum.photos/250/180" alt="左侧图片" class="inline-image-left">
<p>
现在看左边的图片，我把它float到了左边，右边和下面的文字就自动围过来了。这种流动的、自然的排版效果，正是float的设计初衷。它不是为了做那种死板的分栏布局，而是为了让内容能够"呼吸"，让图片和文字产生互动。
p>
<p>
当然，现代CSS给了我们shape-outside这种更强的工具，可以让文字沿着不规则形状环绕。但兼容性嘛...你自己品。而且即便用shape-outside，你也得先float了再说。所以你看，float依然是基础，依然是必须掌握的技能。
p>
<div style="clear: both; margin: 30px 0; padding: 20px; background: #f0f0f0; border-radius: 8px;">
<h3>shape-outside的高级玩法（需Chrome/Safari支持）h3>
<div class="shape-example">div>
<p style="margin: 0;">
这段文字会沿着左边的紫色圆形环绕，是不是很酷？这就是shape-outside:circle(50%)的效果。但注意，这个圆形div必须先设置float，shape-outside才能生效。所以float依然是基础中的基础，逃不掉的。
p>
<p style="clear: both; margin-top: 20px; font-size: 0.9em; color: #666;">
提示：如果看不到圆形环绕效果，说明你的浏览器不支持shape-outside，建议用Chrome试试。
p>
div>
article>
body>
html>
这种文字自然流动、图片随意穿插的效果，你用Flexbox和Grid做试试？Grid是二维布局，你得事先规划好每个格子放什么；Flexbox是一维的，要么横向要么纵向，没法让文字自己找空隙钻。
只有 float，能让文字像水一样流动，遇到图片就绕开，继续往下流。这是排版，不是布局，是CSS最初被设计出来的目的之一。
场景三：兼容性的最后防线
虽然2024年了，但还是要考虑一些极端情况。比如某些嵌入式设备的浏览器，或者某些企业还在用的"远古神器"（我曾经见过用IE8的内网系统，你敢信？）。
而且，理解float有助于你理解CSS的文档流。如果你连float怎么脱离文档流、怎么清除浮动都搞不明白，Flexbox的BFC、Grid的格式化上下文你更理解不了。float是入门级的大坑，但也是理解CSS布局原理的好教材。
遇到浮动问题别急着砸键盘，按这个套路排查
说了这么多理论，来点实用的。当你遇到页面布局乱了，怀疑是float引起的时候，按这个顺序排查：
第一步：确认是不是真的塌陷了
打开DevTools（F12），选中那个"应该很高但实际很矮"的父容器，看计算后的高度。如果子元素明明有高度，父容器高度却不对，那就是塌陷。
// 在控制台运行这段代码，快速检查所有可能塌陷的容器
document.querySelectorAll('*').forEach(el => {
const style = window.getComputedStyle(el);
const hasFloatChildren = Array.from(el.children).some(child => {
const childStyle = window.getComputedStyle(child);
return childStyle.float !== 'none';
});
if (hasFloatChildren && el.offsetHeight < 10) {
console.warn('疑似塌陷元素:', el);
console.log(' 子元素数量:', el.children.length);
console.log(' 实际高度:', el.offsetHeight);
el.style.border = '3px solid red'; // 标红方便看
}
});
第二步：看有没有清浮动
检查父元素有没有 clearfix 类，或者 overflow 属性。如果没有，加上试试。
/* 快速测试用的clearfix，直接加到元素style里 */
.debug-clearfix::after {
content: "";
display: block;
clear: both;
}
// 或者在控制台直接给元素加清浮动
document.querySelector('.可能塌陷的父元素').classList.add('clearfix');
第三步：检查浮动方向
有时候 float: left 和 float: right 混用，会导致中间出现缝隙，或者换行。确保你的宽度计算是正确的：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>宽度计算错误导致的换行问题title>
<style>
.container {
width: 600px;
border: 3px solid #333;
}
/* 错误示范：宽度超了 */
.wrong-box1 {
float: left;
width: 200px;
height: 100px;
background: #e74c3c;
padding: 20px; /* 这里！padding会让实际宽度变成240px */
border: 5px solid #c0392b; /* border还会再加10px */
/* 实际占用宽度：200 + 40 + 10 = 250px，不是200px！ */
}
.wrong-box2 {
float: left;
width: 200px;
height: 100px;
background: #3498db;
padding: 20px;
border: 5px solid #2980b9;
}
.wrong-box3 {
float: left;
width: 200px;
height: 100px;
background: #2ecc71;
padding: 20px;
border: 5px solid #27ae60;
}
/* 正确做法：用box-sizing或者精确计算 */
.right-box {
float: left;
width: 200px; /* 现在这就是最终宽度，padding和border向内收缩 */
height: 100px;
background: #9b59b6;
padding: 20px;
border: 5px solid #8e44ad;
box-sizing: border-box; /* 就是这行！ */
margin-right: 0; /* 去掉margin，正好放下三个 */
}
/* 或者精确计算： (600 - 20*2*3 - 5*2*3) / 3 = 150px内容宽 */
.calc-box {
float: left;
width: 150px;
height: 100px;
background: #f39c12;
padding: 20px;
border: 5px solid #e67e22;
margin-right: 10px; /* 加点间隔 */
}
.calc-box:last-child {
margin-right: 0;
}
style>
head>
<body>
<h2>错误：宽度计算没考虑padding和borderh2>
<p style="color: #e74c3c;">下面的三个方块应该并排，但因为实际宽度超过了600px，第三个被挤下去了。p>
<div class="container">
<div class="wrong-box1">我实际宽250pxdiv>
<div class="wrong-box2">我实际宽250pxdiv>
<div class="wrong-box3">我只能换行了，因为250+250+250>600div>
div>
<h2>正确做法1：使用box-sizing: border-boxh2>
<div class="container">
<div class="right-box">我宽200px，包含了padding和borderdiv>
<div class="right-box">我宽200pxdiv>
<div class="right-box">我能放下，200*3=600div>
div>
<h2>正确做法2：精确计算内容宽度h2>
<div class="container">
<div class="calc-box">我宽150px内容+40px padding+10px border=200pxdiv>
<div class="calc-box">加上10px margin，三个正好是630...哦超了div>
<div class="calc-box">所以最后一个要去掉margindiv>
div>
body>
html>
这个例子很重要！很多float布局的换行问题，都不是代码错了，是数学错了。width 只是内容宽度，如果还有 padding、border、margin，实际占用空间会更大。三个200px的块加上各种边距，很容易就超过父容器宽度了。
解决方案：
- 全局设置
box-sizing: border-box，这样width就包含padding和border了； - 或者精确计算：(父容器宽 - 所有margin - 所有border - 所有padding) / 列数 = 每列width。
第四步：检查margin折叠和重叠
有时候float元素的margin会和其他元素的margin搞出奇怪的行为，特别是负margin：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>float中的margin陷阱title>
<style>
.wrapper {
width: 600px;
}
.float-box {
float: left;
width: 200px;
height: 100px;
background: #3498db;
margin-right: -10px; /* 负margin！会让后面的元素往上挤 */
position: relative;
z-index: 1; /* 提高层级，不然会被盖住 */
}
.next-box {
float: left;
width: 200px;
height: 100px;
background: #e74c3c;
margin-left: -10px; /* 两边都负margin，就重叠了 */
}
/* 清除浮动的正确姿势 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
style>
head>
<body>
<h2>负margin导致的重叠问题h2>
<div class="wrapper clearfix">
<div class="float-box">我float left，margin-right: -10pxdiv>
<div class="next-box">我也float left，margin-left: -10pxdiv>
div>
<p style="color: #e74c3c;">看到没？两个块重叠了20px！这种技巧在某些布局里会用到，但如果你不知道，debug的时候会疯。p>
body>
html>
第五步：终极方案——上!important调试法
如果实在找不到问题，直接用内联样式强制覆盖：
<div style="float: none !important; background: red !important;">
我现在不浮动了，如果布局变好了，说明就是float的问题
div>
然后一个个排查，总能找到罪魁祸首。
几个让你少熬两夜的实战技巧
最后，送你几个我血泪总结出来的实用技巧，复制粘贴就能用：
技巧1：全局clearfix，一劳永逸
在你的项目里建个 base.css 或者 utils.css，把这段代码贴进去：
/**
* 全局清除浮动类
* 用法：在可能包含浮动子元素的父容器上添加 class="clearfix"
* 原理：通过::after伪元素在内容末尾插入一个块级元素并清除浮动
* 兼容性：IE8+ 及所有现代浏览器
*/
.clearfix::after,
.clearfix::before { /* 有些场景下::before也能帮忙 */
content: "";
display: table; /* 用table可以处理一些margin相关的问题 */
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 触发hasLayout */
}
/*
* 更现代的简洁写法（如果你不需要支持IE8）：
*/
.clearfix-modern::after {
content: "";
display: block;
clear: both;
}
技巧2：IE兼容性处理（虽然不想提，但以防万一）
如果你真遇到了要支持IE8/9的情况：
/* IE8/9对::after支持不完善时的备选方案 */
.lt-ie9 .clearfix {
/* 方案1：expression，性能差但能用 */
zoom: 1;
}
/* 或者直接用overflow:hidden作为IE的fallback */
.lt-ie9 .container {
overflow: hidden;
}
技巧3：响应式时代的float处理
在移动端，float经常和media query配合使用：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式float布局title>
<style>
* {
box-sizing: border-box;
}
.article-list {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.article-item {
/* 移动端：不浮动，单列显示 */
width: 100%;
padding: 20px;
margin-bottom: 20px;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
}
.article-item img {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}
/* 平板端：两列 */
@media (min-width: 768px) {
.article-item {
float: left;
width: 48%;
margin-right: 4%;
}
.article-item:nth-child(2n) {
margin-right: 0; /* 每行第二个去掉右边距 */
}
.article-item:nth-child(2n+1) {
clear: left; /* 每行第一个清除浮动，防止高度不一导致错位 */
}
}
/* 桌面端：三列 */
@media (min-width: 1024px) {
.article-item {
width: 32%;
margin-right: 2%;
}
.article-item:nth-child(2n) {
margin-right: 2%; /* 重置平板的设置 */
}
.article-item:nth-child(2n+1) {
clear: none; /* 重置平板的设置 */
}
.article-item:nth-child(3n) {
margin-right: 0;
}
.article-item:nth-child(3n+1) {
clear: left;
}
}
/* 图片在桌面端float，移动端block */
@media (min-width: 1024px) {
.article-item img {
float: left;
width: 120px;
margin-right: 15px;
margin-bottom: 0;
}
.article-item h3,
.article-item p {
overflow: hidden; /* 防止文字绕到图片下面 */
}
}
style>
head>
<body>
<div class="article-list clearfix">
<article class="article-item">
<img src="https://picsum.photos/300/200?random=1" alt="文章图">
<h3>文章标题1h3>
<p>这是一段文章摘要，在桌面端图片会float到左边，文字环绕...p>
article>
<article class="article-item">
<img src="https://picsum.photos/300/200?random=2" alt="文章图">
<h3>文章标题2h3>
<p>这是一段文章摘要，在平板上会变成两列布局...p>
article>
<article class="article-item">
<img src="https://picsum.photos/300/200?random=3" alt="文章图">
<h3>文章标题3h3>
<p>这是一段文章摘要，在手机上就是单列...p>
article>
<article class="article-item">
<img src="https://picsum.photos/300/200?random=4" alt="文章图">
<h3>文章标题4h3>
<p>float在响应式里依然有用，但得配合媒体查询...p>
article>
div>
body>
html>
技巧4：用现代工具替代，但保留float知识
新项目直接用这些，但要知道它们背后可能还是float（比如某些UI框架的底层）：
<div style="display: flex; justify-content: space-between;">
<div>左边div>
<div>右边div>
div>
<div style="display: grid; grid-template-columns: 200px 1fr 200px;">
<div>左栏div>
<div>中栏div>
<div>右栏div>
div>
<div class="clearfix">
<div style="float: left; width: 200px;">左栏div>
<div style="float: right; width: 200px;">右栏div>
<div style="margin: 0 200px;">中栏div>
div>
技巧5：快速生成clearfix的Snippets
如果你用VS Code，在 settings.json 里加这个代码片段：
{
"CSS Float Clearfix": {
"prefix": "clearfix",
"body": [
".clearfix::after {",
" content: "";",
" display: block;",
" clear: both;",
"}",
"",
".clearfix {",
" *zoom: 1;",
"}"
],
"description": "Standard clearfix hack"
}
}
以后输入 clearfix 按Tab，直接生成完整的代码。
你以为这就完了？上周我还靠它救了个老后台
写这篇文章的时候，我刚好在处理一个"考古项目"。某国企的后台管理系统，2015年上线，用的还是jEasyUI框架，满屏的 float: left，到处都是 clearfix 的各种变种写法，有的用 overflow，有的用空div，有的用伪元素，一个项目里居然有三种清浮动方式，看得我头皮发麻。
他们有个需求：在报表页面加个筛选面板，我第一反应是用Flexbox，写完后才发现，整个页面的布局引擎是十几年前的代码，我加了Flexbox的那一块确实好了，但和周围的float元素产生了奇怪的冲突，z-index失效、遮挡关系错乱。
最后咋解决的？我老老实实用了float，而且用的是他们项目里最老的那种clearfix写法。虽然看着脏，但它能跑，而且和周围的代码风格一致，不会引入新的问题。
这就是现实。技术选型不是选最好的，是选最合适的。float就像一把生锈的瑞士军刀，平时你用不上，但真到了荒郊野外，它还是能开罐头、割绳子、拧螺丝。
而且，理解float能让你成为更好的前端。当你看到一段古老的代码，不是骂骂咧咧说"这谁写的垃圾"，而是能看明白它为什么这样写，甚至能优雅地修复它，这就是专业。
所以，别瞧不起float。把它学扎实了，Flexbox和Grid会让你如虎添翼；学不好，哪天遇到老项目，你还是得加班三天，就像当年的我一样。
最后送大家一句话：前端技术的海洋里，float是一艘老船，虽然破了点，但知道怎么修，总比在海上漂着强。
好了，就唠到这儿，该去写代码了。记得加个clearfix，别像我一样崩溃。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
