★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页面中加入一个空标签,用空标签来清除浮动,此标签可以是任意标签,但是要是
标签时需要另外加上{border:0;};但是空标签清浮动会增加多余的标签代码;
b、overflow清浮动:在需要清除浮动的父标签中加入overflow属性即可,但是在IE6下不认识此属性则加入zoom:1或者height:1%;
c、after清浮动(主要用于非IE浏览器)
after清除浮动常见的css样式为: