（浮动定位是CSS布局中非常重要的手段之一）

float浮动属性可以设置对象左右移动，直到其边缘碰到父元素的边框或另一个浮动元素的边缘。

CSS中包括DIV在内的所有元素都可以以浮动方式进行显示，其优点是浮动框不在文档的普通流（脱离文档流），使得排版更加简单，且具有良好的伸缩性。

float属性可以设置为：left、right、none、inherit ，默认值为none。

①设置为left或right：元素会向其父元素的左侧或右侧边缘浮动。

②设置为none：表示不做任何操作。

③设置为inherit：继承父元素的属性。

例一：HTML:

 CSS:

效果图：

注：这里给div1设置了float属性为left；div2的float属性默认为none；则div1脱离文档流并向左移动，直到其边缘碰触到包含框（这里是body标签）的边缘为止。效果：div2会顶到原div1的位置，其左边框与div1的左边框重合，而文字会围绕着div1排列。

例二：更改：给例一中的div2增加属性：float:left;

效果图：

综上：也可以给div2设置float：right；也可以交换两个div的位置……由此可见，通过设置不同的浮动属性值，可以灵活地定位DIV元素的位置，以达到布局网页的目的。

clear的属性有：none、left、right、both，默认值为none。

①设置为left或right:清除float对左侧或右侧的影响。

②设置为both：左右都有浮动的块元素，而新的块元素两侧都不希望受到影响

③设置为none：表示不做任何操作。

例三：给例二中增加div3，并添加不同的clear属性

效果图：①（给div3添加clear:none/不写）②（给div3添加clear：left;）③（给div3添加clear：right/both）

一：浮动产生的原因：

一般浮动是什么情况呢？一般是一个盒子里使用了CSS的float浮动属性，导致父级对象盒子不能被撑开，这样CSSfloat浮动就产生了。

（div1与div2是包含在黑色边框div下的，由于给div1和div2使用了float属性，使他们浮动起来，无法撑开父元素）

二：浮动产生的负作用：

1、背景不能显示 由于浮动产生，如果对父级设置了（CSS background 背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开 如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示 由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

三：清除浮动的方法：

以一个例子说明不同解决方法：

①：给父级元素设置一定的高度，一般设置为当前div的内容高度。

方法：给父元素div增加属性：height：100px；

②：clear:both;清除浮动（在css样式与html中分别添加如下代码）

③： 对父级元素增加属性：overflow：hidden；

④：伪元素清理浮动：（在原基础上增加如下css代码）

综上，就是浮动定位的内涵与清除浮动的方法。希望本篇文章对大家有所帮助！（欢迎大家补充或交流）