版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
CSS中关于浮动的探究
浮动（float）属性作为CSS中的重要属性，在网页设计中有着至关重要的作用。
float属性有两个作用：
*可以实现让浮动的框向左、向右移动，指到它的外边缘碰到包含它框的边缘或其他浮动框的边缘
*浮动属性的元素脱离了标准文档流，可以认为浮动的元素不在普通的文档流中
我们可以通过以下几幅图来了解CSS中的float属性：
如下图所示，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
如下图所示，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框
在实际的运用中，我们经常会碰到框与文本的结合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框与文本的结合</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 2px solid yellowgreen;
}
img{
width:80px;
/* height:80px;*/
float: left;
}
</style>
</head>
<body>
<div>
<img src="pikaqiu.jpg"/>
<p>让我们更清楚地看到框与文本结合后出现的效果，可以发现文本环绕在框的周边。浮动元素脱离了标准文档流，正常情况下应该是文本中有一部分文字会被覆盖，但其却环绕在框的周边。</p>
</div>
</body>
</html>
既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？
浮动的目的。最初时，浮动只能用于图像（某些浏览器还支持表的浮动），目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。
清除浮动
常见的清除浮动有两种方法：
*clear清除浮动(只能清除元素左右两侧元素浮动的影响）
*overflow（hidden)清除浮动
清除浮动使文本不在受到框浮动的影响，避免浮动对其它元素的影响。
<style type="text/css">
div{
width: 300px;
height: 200px;
border: 2px solid yellowgreen;
}
img{
width:80px;
/* height:80px;*/
float: left;
}
p{
clear: left;/*或 overflow: hidden;*/
}
</style>
