css布局float浮动布局详解，工作半年后才知道的知识2013-11-01 00:08:50
标签：技巧 css float 浮动布局
★float属性
页面布局时主要采用：浮动(float)和定位(position)，还有就是即不浮动也不定位的正常文档流结构三种；
float属性常用的语法是：float:left|right|none；任何元素都可以被浮动，无论是块元素div，ol，ul还是行内元素span、strong都可以浮动，重要的是任何被声明float的元素都会自动被设置成块元素，也就就有块元素的特征，能够设置宽和高； float主要用于布局，标签在float之后为了不影响下面内容的布局，一定要记得清浮动；
float对标签的影响：
float对行内属性标签的影响：行内元素标签在float之后都具有了设置width和height的能力；
float对块属性标签的影响：默认占满行的块属性标签(p)在没有设置宽高的情况下设置浮动后变成内容撑开宽度，但是同样也支持宽高的设置；
float能很好的解决浏览器之间解析标签时Enter键造成的现实间隙问题；
具有float属性的对象在父标签中是不占空间的：在浏览器的解析中，如果不对父标签进行高度设置，那么父标签的高度会被他所包含的内容撑开，但是在对子标签进行浮动之后父标签的高度就不能被子标签撑开了；要解决这个兼容的问题方法有四种：
a、 给父标签设置高度，但是这种方法只适用于高度固定的情况下，可以尝试用min-height；
b、给父标签设置float属性；
c、 给父标签的关标签前清除浮动；
d、 直接给父标签设置一个overflow:hidden;具有清除内部浮动的作用；
★clear属性
clear属性定义了元素的某个方向上不允许出现浮动元素，常用的语法结构是：clear:none|left|right|none；一般常用的是clear:both；
常用清浮动的位置：标签在float后会处于漂浮状态，为了不影响下面的布局，一定要清浮动选择请浮动位置时我们应该注意两点：
a、清除浮动一定要在浮动标签完成布局后进行添加，否则会影响到浮动标签的布局；
b、清除浮动必须与前面的浮动标签属于同级关系；
★清浮动的几种方法
在使用float布局时常需要清除float浮动，常用的清浮动的方法有空标签清浮动、overflow清浮动、after清浮动、父标签浮动清除子标签的浮动等几种方法；
a、空标签清浮动：方法是在html页面中加入一个空标签，用空标签来清除浮动，此标签可以是任意标签，但是要是<hr>标签时需要另外加上{border:0;}；但是空标签清浮动会增加多余的标签代码；
b、overflow清浮动：在需要清除浮动的父标签中加入overflow属性即可，但是在IE6下不认识此属性则加入zoom:1或者height:1%；
c、after清浮动（主要用于非IE浏览器）
after清除浮动常见的css样式为：
<style type=”text/css”>
.out{zoom:1}//主要针对IE6/7以及遨游浏览器；
.out:after{clear:both;content:””;visibility:hidden;display:block;} //主要针对ff、chrome、opera、IE8；
d、子标签浮动，给父标签浮动：标签嵌套时，如果父子标签均浮动则不用给子标签清浮动；
f、下一标签直接清浮动：兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动； e、使用position:absolute;来清除浮动；
★overflow属性
overflow属性定义了当内容溢出元素框时的样式，常用的语法是：
overflow:visible|auto|hidden|scroll;相关属性：overflow-x,overflow-y;
visible:不剪切内容也不添加滚动条；
auto:是body对象和textarea的默认值，在需要时剪切内容并添加滚动条；
hidden:超出部分隐藏；
scroll:总是显示滚动条；
★display属性
display：display属性规定元素应该生成的框的类型，常用的语法是：
display:block|none|inline；其中block是说该元素以块属性显示，通过这个属性值我们可以实现行内属性到块属性之间的转换，以达到我们想要的效果，none：隐藏，此元素不会被显示；inline：以行内属性显示，这个属性可以使块属性标签具有部分行内属性，可以用来解决IE6双倍bug的问题；