在网页制作中，div是最常用的块级标签，它本身不产生任何样式，但作为容器可以包裹各类内容。通过配合CSS，我们能用div拼出头部、导航、主体和底部等区域，形成清晰的页面骨架。
一、使用float实现基础分栏
早期布局常用float让div脱离常规流，向左或向右浮动形成多栏效果。注意父容器需清除浮动防止高度塌陷。
<!DOCTYPE html>
<html>
<head>
<style>
.left { float: left; width: 30%; background: #eee; }
.right { float: right; width: 70%; background: #ddd; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="left">侧边栏</div>
<div class="right">内容区</div>
<div class="clear"></div>
</body>
</html>
二、用display属性控制盒子行为
div默认为block，通过设置display可以改变排列方式。例如写成inline-block可让多个div在同一行显示且保留块特征。
.box {
display: inline-block;
width: 200px;
margin: 10px;
border: 1px solid #ccc;
}
三、flex弹性布局技巧
现代开发推荐flex，它在父级div上声明display:flex即可让子项灵活对齐，不用处理浮动副作用。
<div style="display:flex;"> <div style="flex:1;background:#f0f0f0;">栏目一</div> <div style="flex:2;background:#e0e0e0;">栏目二</div> </div>
常见注意点
- 给浮动元素父级加overflow:hidden可间接清浮动
- flex子项默认不换行，需设置flex-wrap:wrap
- 用box-sizing:border-box避免padding撑破宽度
布局核心在于把页面拆成独立div区块，再用CSS规定它们的位置与尺寸关系。
通过上述方法，你可以应对大部分静态页面结构需求。实际项目中常组合使用，例如用flex做整体框架，内部再用div细分模块。