首页 > web前端 > html教程 > 关于浮动的知识总结_html/css_WEB-ITnose

关于浮动的知识总结_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:21:25
原创
1062 人浏览过

关于浮动,最主要的就是解决浮动在IE6、7下要做的兼容问题。例如:双边距bug,图片下的空隙问题等等。后面要和定位带来的兼容问题一起总结一下好了~~~

块的特征

  1、默认独占一行

  2、没有宽度时,默认撑满一排(即父元素有多宽它就是多宽)

  3、支持所有css命令

行内元素的特征

  1、同排可以继续跟同类的标签

  2、内容撑开宽度

  3、不支持宽高(就是写上宽高值也并没有什么卵用~)

  4、上下的margin和padding有问题(不支持上下的margin,对padding的上下设置并没有起到实际的作用。不会挤开上下的元素)

  5、代码换行被解析为一个空格

inline-block的特点和问题

1、在一行显示

2、内联元素支持宽高

3、没有宽度时默认内容撑开宽度

4、标签之间的换行间隙被解析为空格(无论是块元素还是内联元素都会被解析)

5、IE6/7不支持块属性标签的inline-block

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

加上float以后的元素有如下特征:1、块在一排显示;2、内联元素支持宽高;3、无论是块元素还是内联元素没有宽度时默认内容撑开宽度;4、脱离文档流;(所以要想法设法清浮动呀~~)5、提升层级半层

如何清浮动呢?

1.父级加height。但是 一般网页height值是依据子元素的height和得来的,所以扩展性不好,一般不采用。

2.给所有的父级都添加浮动。但会导致margin左右自动失效

3.给父级加display:inline-block。问题:margin左右auto失效

4.添加

空标签

问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)在IE6下,高度小于19px的元素高度会被当作19px来处理~ 

5.添加
清浮动。但这个方法 不符合结构、样式、行为三者分离的要求

6.after伪类 清浮动方法(现在主流方法)

.clear:after{content:‘’;display:block;clear:both;}  必须是block才行

.clear{zoom:1;}

其中:

after伪类: 是在元素内部末尾添加内容;:after{content"添加的内容";} IE6,7下不兼容,但是在IE6、7下,浮动元素父级有宽度就不用清浮动!

zoom:1;是为了 触发 IE下 haslayout,使元素根据自身内容计算宽高。但是 FF 不支持

7.overflow:hidden 清浮动方法;

overflow有包着浮动元素的特点!但在IE6下不兼容,在IE6下包不住浮动元素,即在IE6下没有包元素的特点

问题:需要配合 宽度 或者 zoom:1 来兼容IE6;(如果该父元素有边框,这里写宽度就会给该父级设置相应的宽度,写zoom:1仅仅达到实现轻浮动的目的,边框会包住整个页面的width)

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板