浮动在文档布局中是一个非常重要的概念。
如图13.1.1所示，对于普通的块级元素，不论元素的宽度是否能占满一行，它们都会独占一行。
图13.1.1 不浮动的块级元素
而当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，直到碰到所处的容器的边框，或者碰到另外一个浮动的元素。
如图13.1.2所示，第一个元素“块级元素1”分别进行了左浮动（图左）和右浮动（图右）。因为元素浮动，所以它被移出文档流，不再占据空间。在图左中，“块级元素1”与“块级元素2”发生了重叠，因此“块级元素2”被“块级元素1”覆盖隐藏。在图右中，“块级元素1”向第一行右边界移动，“块级元素2”和“块级元素3”按正常方式排列。
不管是div、p等块级元素还是span这种行内元素都可以浮动，浮动后的元素会和块级元素的表现一样。
图13.1.2 块级元素左浮动和右浮动
CSS中的float属性用于设置元素的浮动方式。这个属性拥有三个可选的关键字枚举值，如下表所示：
表13.1.1 float属性的值
动手写13.1.1 利用元素浮动让图片靠右“动手写13.1.1”是一个使用浮动的常见方法。默认情况下，元素总是靠页面左边排列的，本例中将图片元素样式的float属性设置为right，它就可以靠页面右侧排列了。效果如图13.1.3所示：
(www.xing528.com)
图13.1.3 利用元素浮动让图片靠右
浮动后的元素在页面中的显示如果过于怪异，往往会让人难以理解。如图13.1.2中所演示的那样，一个浮动的元素会被移出文档流，不再占据空间，这可能就会造成该元素之后的兄弟元素与之重叠。尽管如此，浮动元素又会以另外一种方式向大家证明自己的存在。如果一个元素与另一个浮动元素重叠，那么浮动元素会影响本身的行内元素或文本的排列，也就是展现浮动元素被环绕的效果。
动手写13.1.2 浮动元素的文字环绕效果
“动手写13.1.2”中的图片与段落是兄弟元素，正常情况下图片独占一行，段落会在图片下面逐行展示。本例将图片的float属性设置为左浮动left，段落元素中的文本变成环绕图片展示。本例的效果如图13.1.4所示：
图13.1.4 浮动元素的文字环绕效果
当元素内的文本环绕浮动元素排列时，它的内外边距也会变得比较怪异，浮动元素的宽度有可能会覆盖边距的效果。文本与浮动元素的距离只能通过浮动元素的内外边距来控制。
动手写13.1.3 浮动元素与环绕文本的间距
“动手写13.1.3”中的图片向左浮动，段落文字环绕图片排列。段落的左内边距为100px，图片的宽度是220px。此时，环绕在图片右侧的文本和图片没有间距，因为图片的宽度大于段落的左内边距，覆盖了左内边距的效果；环绕在图片下方的文本则能明显看出100px宽度的内边距。如果希望让图片与其右侧文本有间距，可为图片增加一个50px右外边距，此处使用内边距也是有效果的。本例的效果如图13.1.5所示：
图13.1.5 浮动元素与环绕文本的间距
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
