[分享]css两栏布局注意实现

css两栏布局是web开发中常见的一种布局，下面我们来介绍如何注意实现。第一点，我们要确定两栏的宽度和高度。通常情况下，左栏宽度固定，右栏宽度为自适应。而高度，则要让左右两栏都占据一整个屏幕，可以给h...

css两栏布局是web开发中常见的一种布局，下面我们来介绍如何注意实现。

第一点，我们要确定两栏的宽度和高度。通常情况下，左栏宽度固定，右栏宽度为自适应。而高度，则要让左右两栏都占据一整个屏幕，可以给html和body元素设置高度为100%，再给左右两栏分别设置高度为100%。

 html,
  body {
    height: 100%;
  }

  .left {
    width: 200px;
    height: 100%;
    float: left;
  }

  .right {
    height: 100%;
    margin-left: 200px;
  } 

第二点，我们要让左右两栏都显示在同一行。为了实现这一点，我们可以使用float属性，让左栏向左浮动，右栏则在左栏的右边显示。但是这样会出现一个问题，就是如果右栏的内容过多，就会超出容器的宽度。为了解决这个问题，我们可以给右栏设置margin-left的值为左栏的宽度。

第三点，我们还要注意清除浮动。如果不清除浮动，在一些情况下会出现诡异的显示问题。我们可以使用clearfix来清除浮动。

 .clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }

  .clearfix {
    display: inline-block;
  }

  html[xmlns] .clearfix {
    display: block;
  }

  * html .clearfix {
    height: 1%;
  } 

最后，我们还要注意一些细节问题，例如边框、背景等。

综上所述，实现css两栏布局还是比较简单的，只要注意以上几点即可。当然，如果需要实现更复杂的布局，还要根据具体情况进行调整。