能用但不推荐——因语义冲突、触发bfc致布局塌陷，且动态内容下清浮动难；现代应优先用flexbox或grid，仅ie9-需兼容时慎用float并配伪元素清除。
浮动在 <article></article> 和 <section></section> 里还能用吗？
能用，但不推荐——不是语法报错，而是语义和布局逻辑冲突。这两个标签本质是内容分组容器，浏览器默认是块级、无特殊定位行为；加 float 后会触发 BFC、脱离文档流，容易让后续兄弟元素“塌陷”或错位，尤其当内部有清除浮动遗漏时。
常见错误现象：<section></section> 浮动后，紧随其后的 <footer></footer> 突然跑到它右边、高度塌成一条线；或者响应式断点下浮动失效，布局完全错乱。
- 如果只是为了左右并排，优先用
display: flex或display: grid - 若必须兼容 IE9 及更老环境，才考虑
float，但需确保父容器有overflow: hidden或伪元素清除 -
<article></article>和<section></section>的语义重点在“内容独立性”，浮动会削弱这种可读性，对屏幕阅读器也不友好
为什么 float 在语义化标签里特别容易出清浮动问题？
因为 <article></article> 和 <section></section> 往往嵌套多层、内容动态生成（比如 CMS 输出），内部子元素是否浮动、是否自带 clear 不可控。一旦某个子 <div> 浮动了但没被清除，整个 <code><section></section> 的高度就塌掉，导致后续布局连锁崩坏。
典型场景：文章列表页中，每个 <article></article> 包含浮动的缩略图 + 文字描述，但未统一处理清除逻辑。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
clear: both放在最后一个子元素上——DOM 动态插入时可能漏掉 - 用伪元素清除更稳妥：
<section class="clearfix"></section>配合.clearfix::after { content: ""; display: table; clear: both; } - 注意
float会改变元素的display计算值（如inline元素浮动后表现像block），影响行高、垂直对齐等细节
替代 float 的现代写法怎么选？
Flexbox 是最直接的平替，尤其适合 <article></article> 内部结构（如头图+标题+摘要左右/上下排列）；Grid 更适合整体页面区域划分（比如 <main></main> 下多个 <section></section> 网格布局）。
性能差异很小，但 Flexbox 在 Safari 旧版本（@supports 降级）。
- 单行并排文字+图标？用
display: flex; align-items: center; - 多列卡片列表？
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) - 要兼容 IE10+ 且必须用浮动？至少给父容器加
zoom: 1触发 hasLayout
浮动 + 语义化标签在响应式断点里最容易翻车的地方
媒体查询中只改 float 值（比如从 left 改成 none），但没同步处理清除逻辑或宽度重置，会导致小屏下内容堆叠错乱、文字溢出、甚至触发横向滚动条。
更隐蔽的问题：某些 CSS 框架（如早期 Bootstrap）的栅格类（.col-md-6）内部用了浮动，和你手写的 <section></section> 浮动叠加后，计算逻辑混乱。
- 响应式中禁止单独改
float，务必配套调整width、clear和容器overflow - 用
flex-wrap: wrap替代多列浮动，断点只需调flex-basis，逻辑更干净 - 检查 DevTools 的 computed 样式，确认
float是否真的被覆盖——有时 specificity 不够，老规则还在生效
