在css浮动布局中，元素脱离文档流后按照特定规则排列，当设置的float方向和期望的元素顺序不匹配时，就会出现顺序错乱的问题，这时候调整html结构往往比修改css属性更根本有效。
浮动布局的元素排列基本规则
浮动元素会脱离普通文档流，向左或者向右移动，直到碰到包含块的边缘或者另一个浮动元素的边缘。同一方向的浮动元素会按照在html中出现的先后顺序依次排列，不同方向的浮动元素会分别向对应方向靠拢。
如果希望两个元素A在左，B在右，但是html中先写了B再写了A，即使给A设置float:left，B设置float:right，也可能出现顺序不符合预期的情况，这就是html结构和float方向不匹配导致的。
通过html结构配合float方向调整顺序的方法
同方向浮动的元素顺序调整
同方向的浮动元素，排列顺序和html中的出现顺序完全一致，要调整顺序只需要调整html中元素的先后位置即可。
比如希望三个div从左到右依次是box1、box2、box3，都设置float:left，html结构就要按这个顺序写：
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.box1, .box2, .box3 {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
.box1 { background: #f00; }
.box2 { background: #0f0; }
.box3 { background: #00f; }
</style>
如果把html中box2和box3的顺序调换，页面上box3就会出现在box2的左边，和html顺序保持一致。
不同方向浮动的元素顺序调整
当需要左右布局，比如左侧导航，右侧内容，希望导航在左，内容在右，这时候需要把左侧浮动的元素写在html前面，右侧的写在后面，再分别设置float:left和float:right。
错误示例：html先写右侧内容，再写左侧导航，即使设置导航float:left，内容float:right，导航也会出现在内容的右侧：
<!-- 错误结构 -->
<div class="container">
<div class="content">右侧内容</div>
<div class="nav">左侧导航</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
}
.nav {
float: left;
width: 200px;
height: 300px;
background: #eee;
}
.content {
float: right;
width: calc(100% - 210px);
height: 300px;
background: #f5f5f5;
}
</style>
正确示例：调整html结构，把导航写在前面，内容写在后面：
<!-- 正确结构 -->
<div class="container">
<div class="nav">左侧导航</div>
<div class="content">右侧内容</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
}
.nav {
float: left;
width: 200px;
height: 300px;
background: #eee;
}
.content {
float: right;
width: calc(100% - 210px);
height: 300px;
background: #f5f5f5;
}
</style>
常见注意事项
- 调整结构后要同步检查float方向是否和元素的目标位置匹配，左排列用float:left，右排列用float:right
- 浮动元素的父容器要记得清除浮动，避免高度塌陷影响后续布局
- 如果元素有固定宽度，要预留足够的空间给浮动元素，避免后面的元素被挤到下一行
总结
css浮动布局的元素顺序问题，核心是先确定所有浮动元素的目标排列顺序，再按照这个顺序调整html中元素的先后位置，最后给每个元素设置对应方向的float属性。不要试图只通过修改float方向来调整同方向浮动元素的顺序，html结构才是决定浮动元素排列顺序的基础。