<!DOCTYPE html>
<html>
<head>
<style>
.left {
background: yellow;
float: left;
width: 20%;
}
.middle {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>
結果：
letf:看不全？設置了margin，然後能看清了：
我們發現右邊掉下來了。原因是：自適應的盒子是優先渲染的，就是運行到自適應盒子，它就開始渲染，不管後面有什麼盒子。例如把middle這個盒子放最開始上面，會優先渲染：
那麼，如果把自適應放到最後面，是不是就不會有盒子下沉？果然可以：
因爲，如圖，可以讓div.right盒子先渲染，原理是浮動元素脫離文檔流，並提前浮動到右邊，且 BFC 元素與浮動元素不會相互覆蓋，此時div.middle再去佔有剩餘寬度就可以了。
參考：
BFC 浮動 聖盃佈局 https://blog.csdn.net/weixin_43307658/article/details/86658046