码迷,mamicode.com
首页 > 其他好文 > 详细

float浮动的一些感想。

时间:2015-12-17 15:42:38      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

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

clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素

clear:both;  在左右两侧均不允许浮动元素。

 

 

float特征

1、块在一排显示

2、内联支持宽高。(span在float之后就可以支持宽高了。)

3、默认内容撑开宽度

4、脱离文档流

5、提升层级半层

 

清除浮动的方法:总结

1.加高-给父级加高度

问题:扩展性不好

2.父级浮动

问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)

3.inline-block 清浮动方法:给父级加

问题:margin左右auto失效;

4.空标签清浮动

问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)

5.br清浮动<br clear=”all”/>

问题:不符合工作中:结构、样式、行为,三者分离的要求。

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

.clear:after{content:‘‘;display:block;clear:both;}

.clear{zoom:1;}解决ie6不兼容的问题。

after伪类:元素内部末尾添加内容;

              :after{content"添加的内容";} IE6,7下不兼容

zoom 缩放

              a、触发 IE下 haslayout,使元素根据自身内容计算宽高。

              b、FF 不支持;

7.overflow:hidden 清浮动方法;

         问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;

overflow:  scroll | auto | hidden; 滚动条//隐藏

         overflow:hidden;溢出隐藏(裁刀!)

但是对于一些网页中有返回上层,或者分享链接等小功能模块的overflow就会产生问题,具体什么问题待添加。

 

float浮动的一些感想。

标签:

原文地址:http://www.cnblogs.com/mian-bread/p/5054163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!