css布局float浮动布局详解

时间:2021-10-08 05:36:22
http://laokenet.blog.51cto.com/8131075/1318048
css布局float浮动布局详解 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的问题;