CSS学习之清除浮动

在介绍浮动之前，有必要了解一下行内标签和块属性标签

1.行内元素：又称内嵌或者内联

内嵌(内联、行内)的特征(inline)
    1、同排可以继续跟同类的标签
    2、内容撑开宽度
    3、不支持宽高
    4、不支持上下的margin和padding
    5、代码换行被解

常见的行内标签：<a>       <span>       <strong >     <em>

2.块属性标签

块属性标签的特征(block)
    1、默认独占一行
    2、没有宽度时，默认撑满一排
    3、支持所有css命令

常见的块属性标签：<div>   <p>   <dl> <dt><dd>    <ol> <ul> <li>   <h1-h6>

注：以上两者可以相互转换，可通过display:block/inline来完成

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

我们想，如果元素可以在一行内显示，并且同时支持宽高，该如何做呢？由此，引出inline-block的概念

3.inline-block(行内的块)

inline-block 特性：
   1、块在一行显示；
   2、行内属性标签支持宽高；
   3、没有宽度的时候内容撑开宽度

问题：
   1、代码换行被解析；
   2、ie6 ie7 不支持块属性标签的inline-block（校正：这个属性应该说 在IE6/7下是有兼容问题的，不过该属性的设置总是会触发hasLayout）

虽然inline-block解决了部分问题，但是在兼容性问题和代码解析的层面上还不够完善，正如上面所描述的

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

于是，浮动的概念横空出世，可以理解为完美的inline-block或者它的升级版

首先了解一下浮动的概念

（文档流是文档中可显示对象在排列时所占用的位置。）

浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

css表示方法 float:left| right | none | inherit

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

我们讲，虽然浮动可以解决inline-block的不完善处，但是浮动还是会带来其他的一些问题，为了避免因浮动而产生的浏览器兼容问题，清除浮动便显得尤为重要。

下面介绍几种清除浮动的方法，并做对比性分析

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

我们可以这么理解，既然浮动使得元素脱离了文档流，可以认为是飘了起来，包含它的父级可以认为是一条松紧绳，在不存在浮动的情况下，父子均处于同一层面上，父级会

因为子级的变大而伸展开来，如果设置了浮动，那么不在同一层级上，父级便失去了约束力。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

我们还要引入一个概念hasLayout，由于和下面所介绍清除浮动有一定关联，不得已拉出来单独说一下，该属性其实是IE的过时属性，存在于IE6/7 /更低版本，在IE8、IE9中，hasLayout属性已经被废弃。

当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。

我们没必要纠结在hasLayout的本质，只需了解触发它的因素，使其能够根据子级来重新渲染布局。

display:inline-block设置可以触发hasLayout

因为设定width,height本身就能激发hasLayout，对于设定了高或者高的元素，不用去管他，如果本身没有宽和高，那么我们可以通过属性zoom来激发，这个属性始终能激发，

为了避免属性值设置而产生的额外影响，一般通过zoom:1来控制，可以为放大为一倍，将不产生任何实质性的变动。

注意：IE下并不是不支持display:inline-block属性，只是在IE6/7下对块属性元素设置display:inline-block并不能像其他浏览器中那样展示，也就是说这个属性在IE6/7下是有兼容问题的，只能说支持的不够完善，不过，这个属性设置却能触发hasLayout

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1）父级加高 height：给父级设定高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

2）父级跟着浮动

原理：所有代码一起浮动，就变成了一个整体，所有的元素都在同一层面上

优点：没有优点

缺点：会产生新的浮动问题。父级浮动，那么父级的父级也需要如此，直到body，显然是不科学的。

建议：不推荐使用，只作了解。

3）父级元素设定显示属性 display:inline-block

原理：对于除IE6、7之外的浏览器均是支持的，特殊就在在IE6/7下回触发hasLayout，使得在各大浏览器下都是兼容的

优点：可以做到兼容

缺点：代码换行会被解析

建议：不推荐使用，只作了解。

4）结尾<br/>标签来清除浮动

.clear{clear:both;}

a、直接使用<br clear="all"/>来清除 可以实现（br的固有属性）【这里违反了 结构（html）   样式（css）  行为（js）  三者分离的原则】

b、利用<br class="clear" />来清除 也可以

【注意】以上两种均需结合父级zoom:1来做到各个浏览器兼容（针对在IE下父级没有定义宽高，即没有触发hasLayout的情况下）

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both

优点：可以做到兼容

缺点：凭空多出<br/>语义上不合适

建议：不推荐使用，只作了解。

5）空标签来清除浮动

结束加<div class="clear"></div>

【注意】这是之前主流清除浮动的方法

原理：结尾加<div class="clear"></div>

优点：可以做到兼容

缺点：凭空多出<div>语义上不合适，如果多处浮动，那么均需加空div

建议：不推荐使用，只作了解。

6）目前主流清除浮动方法

.clear:after{content:'';display:block; clear:both;}.clear{zoom:1;}

原理：通过伪类在结束加上空，然后清除浮动

优点：完美兼容

7）overflow清除浮动

div{overflow:hidden;zoom:1;}

原理：overflow清除浮动

优点：可以做到兼容

缺点：当子元素高/宽大于父级时，会出现滚动条，当然如果父级大于子级，完全可以如此使用