元素的浮动

1.元素的浮动属性float

浮动属性作为CSS3的重要属性，在网页布局中至关重要。在CSS中，通过float属性来定义浮动，所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

其基本语法格式为：

选择器{float： 属性值；}

在上面的语法中，常用的float属性值有3个，具体如下

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

 

 

 

 

 

示例：

 在上例中，所有元素均不设置float属性，也就是说元素float属性值都能为其默认值none。

效果图：

在图中，box01、box02、box03及段落文本从上到下ー一罗列。可见如果不对元素设置浮动，则该元素及其内部的子元素将按照标准文档流的样式显示，即块元素占据页面整行。
接下来，在上例的基础上演示元素的左浮动效果。以box01为设置对象，对其应用左浮动样式，具体CSS代码如下：

效果图：

 在上面的效果容易看出，设置左浮动的box01漂浮到了box02的左侧，也就是说box01不在受到文档流控制，出现在了一个新的层次上。

下面，在上述案例的基础上。继续给box2设置左浮动。具体CSS代码如下：

效果如下：

在图中，box01、boxo2、boxo3三个盒子整齐地排列在同一行，可见通过应用“float:left”样式可以使box01和box02同时脱离标准文档流的控制向左漂浮。
继续给box03设置左浮动，具体CSS代码如下：

在图中，box01、box02、box03三个盒子排列在同一行，同时，周围的段落文本将环绕盒子，出现了图文混排的网页效果。需要说明的是，float的另一个属性值“right”在网页布局时也会经常用到，它与“left"属性值的用法相同但方向相反。应用了“float: right”"样式的元素将向右侧浮动。

2.清除浮动

在网页中，由于浮动元素不再占用原文档流的位置，使用浮动时会影响后面相邻的固定素。例如上图中的段落文本，受到其周围元素浮动的影响，产生了位置上的变化。这时，如果要避免浮动对其他元素的影响，就需要清除浮动。在CSS中，使用 clear属性清除浮动

其基本语法格式如下。

选择器 {clear：属性值；}

clear的常用属性值如下：

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除左侧浮动的影响）
both	同时清除两侧浮动

 

 

 

 

 

代码：

 效果：

 通过图中可以看出，清除段落文本左侧的浮动后，段落文本不再受到浮动元素的影响，而是按照元素自身的默认排列方式，独占一行，排列在浮动元素下面。

需要注意的是，clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。