浮动容器中混用浮动与非浮动子元素会导致布局错乱，因浮动元素脱离文档流；解决方式有三：1. 非浮动子项加clear属性；2. 父容器用伪元素清除浮动；3. 将非浮动项移至独立容器并清浮。
当浮动容器里既有浮动子元素，又有非浮动子元素时，非浮动项容易被浮动项“顶上去”或布局错乱。核心问题是：浮动元素脱离文档流，导致后续非浮动内容“感知不到”它的高度，从而发生重叠或错位。
非浮动子项加 clear 属性
这是最直接的处理方式——让非浮动子项主动避开前面的浮动影响。
- 在非浮动子元素上设置 clear: both（或 clear: left/right，按需选择），它会强制该元素下移到所有相关浮动元素的下方；
- 注意：clear 只对同级浮动元素生效，且必须写在非浮动元素自身上，不能只靠父容器加；
- 例如：.content { clear: both; }，适用于紧跟在浮动列表后的文字块。
用清除浮动的伪元素撑开父容器
如果非浮动子项需要和浮动子项“共处一室”，但又希望父容器正确包裹全部内容（包括浮动项），就得先解决父容器塌陷问题。
- 给浮动容器添加 ::after 伪元素，并设为 display: table; clear: both; 或 display: block; clear: both; content: "";；
- 这样父容器能正确计算高度，非浮动子项就能自然落在浮动内容之后，无需额外加 clear；
- 这是现代常用方案，兼容性好，不污染 HTML 结构。
把非浮动项移到清除后的独立容器中
如果语义或结构允许，也可以物理隔离。
立即学习“前端免费学习笔记（深入）”；
- 将非浮动内容（比如页脚、说明文字）移出当前浮动容器，放在下一个兄弟容器里；
- 并在该新容器上加 clear: both，确保它完全避开前面所有浮动；
- 适合内容逻辑本就不属于同一功能区块的情况，比如侧边栏浮动后，把底部版权信息单独放一个 div。
基本上就这些。关键不是“能不能混用”，而是“要不要让非浮动项受浮动影响”。根据布局意图选一种：要同行显示就清父容器，要严格分层就加 clear 或拆容器。不复杂但容易忽略细节。
