浮动元素的显示顺序由HTML结构和float属性共同决定，先在HTML中出现的元素优先排列，float:left实现从左到右、float:right从右到左排列，clear属性可清除浮动影响布局，现代布局推荐使用Flexbox或Grid以获得更灵活的顺序控制。
浮动元素的显示顺序主要由HTML结构和CSS中的float属性共同决定。默认情况下，浮动元素会按照它们在HTML中出现的先后顺序进行排列，同时受到浮动方向的影响。
1. HTML结构决定基本顺序
浮动元素在页面中的排列顺序首先取决于它们在HTML文档流中的位置。先写在HTML中的元素会优先靠左或靠上排列（对于float: left而言）。
两个都设置float: left的div，谁在前面写，谁就在左边。
如果想改变视觉顺序，最直接的方法是调整HTML中元素的书写顺序。
立即学习“前端免费学习笔记（深入）”；
2. 使用float控制左右分布
通过设置float: left或float: right可以控制元素向哪边靠齐。
- 多个
float: left元素从左到右依次排列 - 多个
float: right元素从右到左依次排列 - 混合使用时，left元素靠左，right元素靠右，可能产生错位
注意：不建议混合使用left和right浮动来布局复杂结构，容易造成混乱。
3. 清除浮动影响排列
使用clear属性可以控制元素是否允许旁边有浮动元素。
例如：clear: both会让元素下移，直到没有浮动元素挡住它，从而影响整体布局顺序。
这在需要“换行”或分组排列浮动元素时很有用。
4. 更现代的替代方案
虽然浮动曾广泛用于布局，但现在更推荐使用Flexbox或CSS Grid来控制元素顺序。
- Flexbox可通过
order属性直接调整子元素显示顺序 - Grid可通过网格线和
grid-column等属性灵活控制位置
这些方法比浮动更直观、可控性更强，且不受HTML书写顺序严格限制。
基本上就这些。如果只是简单排列，调整HTML顺序+合理使用float即可；若需复杂控制，建议改用Flex或Grid布局。
