css左中右布局加入介绍

CSS左中右布局常用于网页的排版设计，其优点在于可以使网页看起来更加美观舒适。下面是介绍如何使用CSS实现左中右布局。

.container {
  width: 100%;
  height: 500px;
}

.left,.middle,.right {
  float: left;
  height: 100%;
}

.left {
  width: 20%;
  background-color: #f2f2f2;
}

.middle {
  width: 60%;
  background-color: #fafafa;
}

.right {
  width: 20%;
  background-color: #f2f2f2;
}

上述代码中，通过设置width属性和float属性，使左边栏、中间主体区域和右边栏横向排列。同时，为防止高度塌陷，在容器中添加height属性。

需要注意的是，当某一元素中存在浮动元素时，这个元素就会“挤掉”浮动元素，导致高度塌陷。为避免这种情况，可以在容器中使用clearfix方法，即在容器尾部添加一个空div元素，并为其设置clear:both属性。

.clearfix:before,.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

最后，将左中右布局加入网页之中即可。