标签：
浮动
在标准文档流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和其他的块级元素依次排列。
要实现浮动需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧浮动，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容和宽度来确定，这样就能够实现网页布局中的“1-2-1”或“1-3-1”布局类型。
浮动在网页中的应用
在CSS中，使用浮动（float）属性,除了可以建立网页的横向多列布局，还可以实现许多其他的网页内容的布局。
Float的属性值
|
属性值 |
说明 |
|
Left |
元素向左浮动 |
|
Right |
元素向右浮动 |
|
None |
默认值。元素不浮动，并会显示在其文本中出现的位置 |
清除浮动
在前面的讲解中，全面的剖析了CSS中的浮动属性，并且知道由于某些元素设置了浮动，在页面排版时会影响其他元素的位置，如果使它后面标准文档流中的元素不受其他浮动元素的影响，该怎么办？
Clear属性在CSS中正是起到这样的作用，他正是为了消除浮动元素对其他元素的影响。
清除浮动影响
在CSS中clear属性规定元素的哪一侧不允许其他浮动元素，它的常用值如下表所示。
Clear属性值
|
值 |
说明 |
|
Left |
在左侧不允许浮动元素 |
|
Right |
在右侧不允许浮动元素 |
|
Both |
在左、右两侧不允许浮动元素 |
|
None |
默认值，允许浮动元素出现在两侧 |
如果要将<img>标签两侧的浮动元素消除，使用clear设置代码如下所示。
img{
clear:both;
}
Clear属性常用于清除浮动带来的影响和扩展盒子模型的高度。
扩展盒子高度
关于clear属性的作用，处理用于消除浮动影响之外，还能用于扩展盒子高度。
一个<div>的范围是由它里面的标准文档流的内容决定的，与里面的浮动内容无关。
溢出处理
Overflow属性
在CSS中，处理盒子中的内容溢出，可以使用overflow属性。它规定当内容溢出盒子时发生的事情，如内容不会被修剪而呈现在盒子之外，或者内容会被修剪，修剪内容隐藏等。
Overflow属性的常见值
|
属性值 |
说明 |
|
Visible |
默认值，内容不会被修剪，会呈现在盒子之外 |
|
Hidden |
内容会被修剪，并且其余内容是不可见的 |
|
Scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
|
Auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
Overflow属性的妙用
在CSS中overflow属性除了可以对盒子内容溢出进行处理之外，还可以与盒子宽度配合使用，清除浮动来扩展盒子的高度。由于这种方法不会产生冗余标签，仅需要设置外层盒子的宽度和overflow属性值为hirdden即可，因此这种方法常用来设置外层盒子包含内层浮动元素的效果。
使用overflow属性完成清除浮动和扩展盒子高度。其设置方法非常简单，只需要为浮动元素的外层元素father设置宽度和将overflow属性设置为hidden，同时使用清除浮动的代码“<div class="clear"></div>”就可以完全删除，也不需要添加到HTML代码中了。
由上述代码可以看出，实现同样的效果，使用overflow属性配合宽度清除浮动和扩充盒子高度，比使用clear属性代码量大大减少，也减少了空的HTML标签。这样做的好处是使代码更加简洁、清晰，从而提高了代码的可读性和网页性能。
但是如果页面中有绝对定位元素，并且绝对定位元素超出了父级的范围，这里使用overflow属性就不合适了，而需要使用clear属性来清除浮动。
因此通过clear属性和overflow属性实现清除浮动来扩充盒子高度，要根据他们各自的特点和网页实际需求来设置扩充盒子高度。
标签：
原文地址：http://www.cnblogs.com/water5832/p/5727769.html
