目标

元素浮动清除浮动

在word文档里，文本围绕图片，一般把这种方式称为“文本环绕”。这种排版的形式在网页里也是很常见，图片和文字并列排版，不过在网页里，所有元素都可以进行类似这种并列排版。专业术语叫浮动。在以前浮动基本是网页布局排版的唯一选择，但现在出现更好、更方便的属性来代替浮动。

在word文档里，我们经常需要将图片和文本并列排放一起，这种排版称为'文本环绕'。

word排版

网站里也经常看见这样的布局。

网页排版

浮动

浮动属性float在以前是CSS布局的最佳利器，我们可以通过不同的浮动属性值灵活地定位div元素，以达到布局网页的目的。

我们可以通过CSS的属性float使元素向左或向右浮动。也就是说，让盒子及其中的内容浮动到文档的右边或者左边，但要注意元素只能左右移动而不能上下移动。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

CSS中，任何元素都可以浮动。浮动生效后，周围的元素会重新排列

语法：float:取值;

属性值

默认情况下，元素是不浮动的。其实使用浮动，就是为了将两个元素或者多个元素并列成一行。

p标签这类块状元素是独占一行的，如何令两个元素合并成一行。

独立分开

根据浮动元素之后的元素将围绕它的原理，将第一个图片设置为浮动，后面的第二个元素p标签就会去到第一行并紧跟着。

图片设置左浮动

这样就可以达到图片和文字并列的效果，在以前网站里用得比较多布局方式就是用浮动。

两个就并列成一行

清除浮动

清除浮动都是在设置左浮动或者右浮动之后的元素内设置。

有时候，仅仅只是想自身发生位移，并不想影响后面的元素，就可以使用清除浮动。

语法：clear:取值;

属性值

一般使用"clear:both;"来把所有浮动清除，省事。

就像下面，我只想把图片往右移动，但并不想影响后面的文字。就在浮动元素之后的元素设置清除即可。

浮动元素的后一个设置清除浮动

图片使用浮动移位了，但并没有影响到后面元素。

并没有并列

总结

浮动float在以前是网页布局的神器，但由于带有的副作用也很大，例如高度塌陷，需要额外清除浮动等等。那为什么现在很少听到这些问题，这是因为随着css不停的发展，已经有更好的、更简单布局方式代替了浮动float！

当然浮动float的学问远不止如此，在一些高级炫酷的动画还是需要用到它。

总结