前端js布局——BFC与浮动
程序员文章站
2022-03-29 14:50:16
...
<!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
下一篇： 网站防范