浮动：
浮动的框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止。文档的普通流中的块框会当浮动框不存在一样。但会影响内联框（通常是文本）的排列。
属性值有：left,right,none;
当浮动元素的父元素没有其他元素内容的时候，父元素会出现“勾搭塌陷”的情况，浮动元素脱离了父元素。为了避免这种情况，需要清除浮动。
清除浮动：
方法一：
clear：both;
在需要清除浮动的地方都加上这句话可以达到目标，兼容性好。但会增加重复代码。
方法二：
使用overflow:hidder; 或则zoom:1；
浮动元素会回到容器里面。
方法三：
：afte伪元素
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个：after伪元素实现元素末尾添加一个看不见的块元素清楚浮动。
可完美兼容各主流浏览器。
.box{
backgroudn:green;
border:1px solid red;
}
.box img{
float:left;
}
.box p{
float:right;
}
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;//触发hasLayout,兼容IE6和IE7
}
<div class="box">
<img src="">
<p>text</p>
</div>
用伪元素方法更合适一点。
注：不清除浮动，容器是不能被撑开的，浮动元素脱离在外面，容器的背景，内外边距都无效。