浮动布局

1. float属性

页面布局时主要采用三种：
- 浮动(float)
- 定位(position)
- 即不浮动也不定位的正常文档流
float:
- none 默认不浮动
- left 左浮动
- right 右浮动
float对标签的影响：
- 都可以被浮动，无论是块级元素div，ol，ul还是行内元素span、strong都可以浮动，重要的是任何被声明float的元素都会自动被设置成块元素，也就就有块元素的特征，设置宽和高 float主要用于布局，标签在float之后为了不影响下面内容的布局，一定要记得清浮动；
float对块属性标签的影响：
- 默认占满行的块属性标签(p)在没有设置宽高的情况下设置浮动后变成内容撑开宽度，但是同样也支持宽高的设置；
具有float属性的对象在父标签中是不占空间的：在浏览器的解析中，如果不对父标签进行高度设置，那么父标签的高度会被他所包含的内容撑开，但是在对子标签进行浮动之后父标签的高度就不能被子标签撑开了；要解决这个兼容的问题方法有四种：
- 给父标签设置高度，但是这种方法只适用于高度固定的情况下，可以尝试用min-height；
- 给父标签设置float属性；
- 给父标签的关标签前清除浮动；
- 直接给父标签设置一个**overflow:hidden;**清除内部浮动的作用；

2. 清浮动的几种方法

常用的清浮动的方法有:
- 空标签清浮动
  - 方法是在html页面中加入一个空标签，用空标签来清除浮动，此标签可以是任意标签，但是要是
    标签时需要另外加上{border:0;}；但是空标签清浮动会增加多余的标签代码；
- overflow清浮动
  - 在需要清除浮动的父标签中加入overflow属性即可，但是在IE6下不认识此属性则加入zoom:1或者height:1%；
- after清浮动

<style type=”text/css”>

.out{zoom:1}//主要针对IE6/7以及遨游浏览器；

.out:after{clear:both;content:””;visibility:hidden;display:block;} //主要针对ff、chrome、opera、IE8；

父标签浮动清除子标签的浮动等
- 子标签浮动，给父标签浮动：标签嵌套时，如果父子标签均浮动则不用给子标签清浮动；

3. overflow属性

overflow属性定义了当内容溢出元素框时的样式，常用的语法是：
- overflow:visible|auto|hidden|scroll;
- 相关属性：overflow-x,overflow-y;
- visible:不剪切内容也不添加滚动条；
- auto:是body对象和textarea的默认值，在需要时剪切内容并添加滚动条
- hidden:超出部分隐藏；
- scroll:总是显示滚动条；

浮动和清除浮动

浮动布局

1. float属性

2. 清浮动的几种方法

3. overflow属性