CSS浮动常遇问题及解决方法

在给元素设置为浮动后并没有出现预期的效果：

这个问题是编程过程中常见问题，特别是对于初学者来说。我就自己平时出现的问题说一下可解办法：

1. 可能问题一：两个同级元素需要并排显示，却以为只给第二个元素设置浮动就会达到效果，结果出现下图所示效果：
   （即和原效果没什么不同）
   其实这还是对浮动理解不深的缘故。如果第一个元素不是浮动，第二个浮动，两个元素是不会显示在一行的，只有第一个元素浮动，第二个浮动也浮动，它们才可以显示在一行。

2. 可能问题二：两个元素都设置为浮动后，依然第二个元素在第一个元素下面：
   第一个元素宽度加上第二个元素宽度超过了总宽度，因此第二个元素会被挤到下一行。但是这个效果有时也会在页面效果中被用到，例如在页面中需要把每个元素并排显示，而且有好几行，效果如下：
   
   html代码如下：

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

css代码如下：

.box1{
            float: left;
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: pink;
        }

3.可能问题三：两个元素中有一个设置了浮动，另一个没有，会出现重叠的情况
如图：

（其中，左边块设置了浮动，右边块没有设置浮动）

给这两个块的父级清除浮动就好。
最后效果：