css 浮动float

标签：基本   自动   宽度   属性   偏差   支持   显示   scroll   计算   

日常切图布局中经常要用到浮动，但是，只会用却不知道浮动的原理，清除浮动的作用。

今天就讲解一下浮动的基本作用与原理，清除浮动的那些方法，日常开发通常用什么清除浮动。

一、什么是浮动？

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

二、什么是文档流？

文档流是文档中可显示对象在排列时所占用的位置，默认从上到下，从左到右排序。

三、为什么要使用浮动？

布局中要两个div并排显示，在不改变div元素属性的情况下，使用浮动使最方便的实现方法。

float:left | right | none | inherit;

四、浮动的作用

1、块在一排显示

2、使内联支持宽高

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半层

五、清除浮动的方法

1.加高 问题：扩展性不好

2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法： 问题：margin左右自动失效；

4.空标签清浮动 问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

5.br清浮动 问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法） .clear:after{content:‘‘;display:block;clear:both;} .clear{zoom:1;} after伪类： 元素内部末尾添加内容； :after{content"添加的内容";} IE6，7下不兼容 zoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。 b、FF 不支持；

7.overflow:hidden 清浮动方法； 问题：需要配合 宽度 或者 zoom 兼容IE6 IE7； overflow: scroll | auto | hidden； overflow:hidden;溢出隐藏（裁刀！）

最常用after伪类清除浮动。

css 浮动float

标签：基本   自动   宽度   属性   偏差   支持   显示   scroll   计算   

原文地址：http://www.cnblogs.com/Argentina/p/7787342.html