[分享]css两个div在同一行显示不出来

最近在写页面的时候遇到了一个问题，就是想让两个div在同一行显示，但是却一直不成功，经过一番研究之后，发现了其中的原因。 这是第一个div 这是第二个div 我们来看一下css样式： .box...

最近在写页面的时候遇到了一个问题，就是想让两个div在同一行显示，但是却一直不成功，经过一番研究之后，发现了其中的原因。

 <div class="box1">
    这是第一个div
  </div>
  <div class="box2">
    这是第二个div
  </div> 

我们来看一下css样式：

 .box1 {
    float: left;
    width: 50%;
  }

  .box2 {
    float: right;
    width: 50%;
  } 

上面的代码看起来没有什么问题，但是实际上却出现了两个div不在同一行显示的问题。经过一番排查，发现原因在于浮动属性使得两个div的父元素高度为0，从而导致两个div在不同行显示。

那么该怎么解决这个问题呢？我们可以在父元素中添加一个clearfix的伪元素：

 .parent::after {
    content: "";
    display: table;
    clear: both;
  } 

这样就可以解决两个div不在同一行显示的问题了，当然也可以使用flex布局、inline-block等方式实现同样的效果。

总之，排查问题时需要从多个方面进行思考，不要被表面上看起来正确的代码所迷惑。