极客观点
项目管理
HarmonyOS
以下为疑问代码，很简单的三栏布局
以下代码是无法实现三栏布局的，最后那个right无法float到middle右侧（因为middle作为块级元素的占位导致right这个div无法上去，这是我的理解），然而我只需把middle和right这两个div的顺序调换就可实现三栏布局（我的想法是因为浏览器渲染页面从上到下，right这个div先float上去，middle作为块级没有把它先挡住，所以便实现了正常的三栏效果）
就是想问下这样的想法是否正确，或者希望能提出更加完善的解答来解释这个疑问~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
color: white;
}
.container {
min-width: 600px;
height: 50px;
background: #eee;
margin: 0 auto;
}
.left {
float: left;
width: 33.33%;
height: 50px;
background: blue;
}
.middle {
width: 33.33%;
height: 50px;
background: green;
margin-left: 33.33%;
margin-right: 33.33%;
}
.right {
float: right;
width: 33.33%;
height: 50px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
</html>
三栏布局写法好像不用那么复杂
用flexbox