浮动布局
浮动布局让元素脱离文档流，可以设置宽高，浮动元素不会独占一行。通过left，right。相对于父级元素移动。
float 浮动布局，三列布局（左右固定，中间自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.left {
float: left;
width: 200px;
height: 100vh;
background: #000;
}
.right {
float: right;
width: 200px;
height: 100vh;
background: #000;
}
.mid {
margin-left: 200px;
margin-right: 200px;
height: 100vh;
}
</style>
</head>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="mid">中sadfasdf</div>
</body>
</html>
flex 和 grid实现三列布局
4️⃣ 现代替代方案（推荐）
Flexbox
body {
display: flex;
height: 100vh;
margin: 0;
}
.left, .right {
width: 200px;
background: #000;
}
.mid {
flex: 1;
background: #ccc;
}
- 左右固定，中间自适应
- 自动撑满剩余空间
- 更容易处理响应式
CSS Grid
body {
display: grid;
grid-template-columns: 200px 1fr 200px;
height: 100vh;
margin: 0;
}
.left { background: #000; }
.mid { background: #ccc; }
.right { background: #000; }
- 简单明了，布局意图清晰
- 更容易控制列宽和间距
