css两个显示在一起的区域

CSS是网页设计过程中非常重要的组成部分。它可以帮助我们控制网页中各个元素的风格和布局。在网页设计中，我们经常需要把两个区域并排排列，这样就需要使用CSS中的float属性。

 .container{
    width: 100%;
  }
  .left{
    width: 50%;
    float: left;
  }
  .right{
    width: 50%;
    float: right;
  } 

上述代码中，我们首先定义了一个容器，它包含左右两个区域。设置容器的宽度为100%，这样它就可以适应不同的屏幕大小。然后我们给左右两个区域分别设置了宽度为50%。这样它们就可以平分容器的宽度。

接着我们使用了float属性，给左区域设置了float:left，给右区域设置了float:right。这样它们就可以并排排列了。

需要注意的是，如果两个区域的高度不同，它们就有可能出现重叠的情况。这时候我们需要使用clearfix hack来解决，具体代码如下：

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

上述代码中，我们定义了一个clearfix类，通过:before和:after伪元素实现了清除浮动。这样两个区域就可以正确地显示了。

总的来说，使用CSS的float属性可以帮助我们实现两个区域的并排排列。但是需要注意一些细节，如高度不同时可能出现的重叠问题，需要使用clearfix hack来解决。