[分享]css中左浮动挤不上去

对于CSS中的左浮动，很多人可能都遇到过这样的问题，就是在一些情况下会发生挤不上去的现象。

 .left {
        float: left;
        width: 50%;
        height: 100px;
        background-color: red;
    }
    .right {
        float: left;
        width: 50%;
        height: 150px;
        background-color: blue;
    } 

以上是一段典型的左浮动代码，我们设置了两个块元素，一个宽度为50%的红色区块和一个宽度也为50%的蓝色区块。在正常情况下，这两个区块应该是并排显示的。

但是，如果我们加上以下的样式：

 body {
        font-size: 0;
    } 

在设置了字体大小为0之后，再进行对浮动元素的排列，我们就会发现，原本应该挨在一起的两个元素出现了间隔。

这是因为，因为浮动元素是行内元素，最终的渲染结果是依据字符间的间隔来计算的，而在这个情况下，字体大小为0会让字符之间的间隔被去掉，所以两个块元素之前的间距也会被去掉，从而产生上述现象。

解决这个问题的方法有很多，比较简单的一种是在两个浮动元素之间添加一个空标签，例如：

 <div class="left"></div>
    <div class="right"></div>
    <div style="clear: both;"></div> 

在两个块元素之间添加一个高度为0，清除浮动的空标签即可。

总的来说，这个问题的解决方法相比其他问题还是比较简单的，只需要加上一个空标签就能很好地解决，所以我们在编写代码时一定要注意这个问题，避免在排版时出现不必要的错误。