css 三栏式布局

CSS三栏式布局是前端开发中常用的布局方式之一，在实现页面布局时经常用到。这种布局方式通常包括左侧栏、右侧栏和中心内容栏。

实现CSS三栏式布局的基础是利用CSS的float属性和width属性来实现定位和宽度的控制。

/* HTML代码 */
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<div class="center">中心内容栏</div>
/* CSS代码 */
.left{
  float:left;
  width:200px;
}
.right{
  float:right;
  width:200px;
}
.center{
  margin:0 200px;
}

在上述代码中，定义了三个div元素，分别对应了左侧栏、右侧栏和中心内容栏。通过为左侧栏和右侧栏设置float属性以及相应的宽度，使它们可以自动绕过中心内容栏，从而实现左右两侧栏的展示。而中心内容栏的宽度则通过设置左、右侧栏的宽度来实现，即通过设置margin来让中心内容栏占据剩余的空间。

需要注意的是，在实现CSS三栏式布局时，需要考虑布局的兼容性问题。有些浏览器或者设备可能无法支持float属性和margin属性，这时候就需要通过其他方式来实现布局。

总之，CSS三栏式布局是一种常用的页面布局方式，能够使页面的展示效果更加美观、直观和整洁。