★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的问题;
css布局float浮动布局详解,工作半年后才知道的知识
精选 转载上一篇:常用公共css文件代码
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
CSS基本布局理解——WEB开发系列38
对CSS学习已经接近尾声,下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
css3 基本布局 web前端 HTML 百度 -
CSS 布局机制之浮动
一、浮动CSS布局的三种机制网页布局的核心就是使用css来摆放盒子CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通
css html 清除浮动 属性值 选择器 -
CSS 浮动布局,解决清除浮动的问题
仅供学习,转载请注明出处浮动特性1、浮动元素有左浮动(floa
清除浮动 html ide