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

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

浮动和清浮动  

2014-03-08 19:10:38|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
float(先浮后动)

所有元素都可以浮动

具有float属性的元素在父标签中不占空间

float能解决标签之间有空隙的问题。

float对文档的影响
使得该元素脱离文档流 如果子级元素全部发生浮动,则父级高度变成0 不能再被内部元素撑开。


clear:none|left|right|both

none不清除浮动 
left左侧不允许有浮动
right右侧不允许有浮动
both 两侧不允许有浮动 


清浮动

空标签请浮动clear:both
优点:容易掌握
缺点:增加大量无语意空标签 结构样式没有分离 不利于维护

overflow:hidden
优点:结构和样式分离 代码量少
缺点:超出内容隐藏,无法显示需要溢出元素的内容

overflow:auto
优点:结构和样式分离 代码量少
缺点:多成嵌套之后,火狐浏览器在某些情况下回照成内容全选;超出内容隐藏IE
的 mouseover造成宽度改变时,会使最外层模块出现滚动条

父元素发生浮动
优点:结构和样式分离 代码量少
缺点:会对总体布局造成影响

br标签清浮动
父标签display:table


:after伪元素清浮动

.clearfix:after{
content: "\200B";(0宽度空格Unicode字符)
display: block;
height: 0;
clear: both;
}
.clearfix{
*zoom: 1;(触发IE的haslayout)
}



overflow:visible|hidden|auto|scroll

visible:显示超出内容 不剪不加滚动条
hidden:超出隐藏
auto:自适应 自加滚动条
scroll:总有滚动条

overflow-x ,overflow-y


visibility:visible|hidden|inherit

可视|不可视|继承父元素的可视属性

visibility:hidden和display:none 区别
一个占空间 看不见
一个不占空间 看不见
  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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