css布局问题‘假设div1,div2,div3,其中div3里包含一个p标签

Question

假设div1,div2,div3,其中div3里包含一个p标签，我使得div1，div2 向左浮动，div3只设置颜色和大小，照理说div3包括其中的p会往上排，被div1/2覆盖住。为什么只移动了div3这个方块，而文字没有移动。并且div3的高度也被拉长了。
<div class="1"></div>
<div class="2"></div>
<div class="3"><p>hello</P></div>
---------------------------------------------------------------------------
css
.1
{
width:100px;
height:100px;
background-color:#eded4;
float:left;
}
.2
{
width:100px;
height:100px;
background-color:#f8ed4;
float:left;
}
.3
{
width:100px;
height:100px;
background-color:#eded4;
}

Answer 1

是因为在设置元素浮动时，设置浮动后，会影响紧邻它后面的那一个元素！块级元素(h1,h2..div,ul...)是纵向排列，行级元素(span,b,a.....)都是横向排列，float属性能够使纵向排列的块级元素横向排列。但是同时 可能会影响 设置float属性的元素下一个元素的位置，这时只要在对下一个CSS设置clear：both或者overflow：hidden。就可以消除这种影响。