注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

浮动  

2014-06-08 15:26:22|  分类: Web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

妙味课堂笔记

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
首先元素浮动后,产生的特性
    1、块元素在一排显示
    2、内联元素支持宽高
    3、不设置宽度,内容撑开宽度
    4、脱离文档流
    5、提升层级半层

清除浮动的方法
1.加高
问题:扩展性不好

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

3.inline-block 清浮动方法:
    问题:margin左右自动失效;

4.空标签清浮动
问题:IE6 最小高度 19px;(font-size:0px)(解决后IE6下还有2px偏差 设置overflow:hidden)
<div style="clear:both;"></div>

5.br清浮动
<br  clear="all"/>
问题:不符合工作中:结构、样式、行为,三者分离的要求。

6.after伪类 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

after伪类: 元素内部末尾添加内容;
        :after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
        a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
        b、FF 不支持;

7.overflow:hidden 清浮动方法;
    问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;

浮动兼容性问题:
IE6双边距BUG(IE6下块属性标签浮动,并且有横向margin,横向margin加倍。):
    a、IE6
    b、浮动
    c、横向margin
    d、块属性标签(加display:inline;)


IE6下 li部分兼容性问题:

    a、左右两列布局,右边右浮动IE6 IE7下折行;(左边元素浮动)
    b、IE6 IE7  li  下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题;(加vertical-align:top;)

vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式;
b、垂直对齐方式可以解决元素下方间隙问题;


图片下方间隙问题
    a、display:block; (改变标签本身特性)
    b、overflow:hidden; (必须知道图片高度)
    d、vertical-align (暂时最完美的方案)
  评论这张
 
阅读(556)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017