ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> web标准中浮动Float 概念详解

web标准中浮动Float 概念详解 (2)

来源:中国设计秀    作者:佚名    点击:1144     加入收藏
“如果当前行的水平方向上没有足够的空间容纳浮动元素,则向下一行,直至有能容纳该元素的行。” [Floatutorial: Float Basics]

  “任何浮动元素都不可能超过原来所处文档留位置的上边界。浮动元素的顶端必定和当前行顶端对齐(或者在没有当前行元素时和前一个块级元素底部边缘对齐)。”[Float Layouts]

  “想要真正理解浮动理论,你必须明白在CSS中什么是行 (line box)。不幸的是,为了解释什么是行,你必须先明白什么是行级元素。行级元素指的是那些非块级元素,例如<em>而行是一个逻辑上的概念,是一个虚拟的矩形,包含了组成该行的所有行级元素,其高度至少等于这些行级元素中最高的那个。” [Float Layouts] 

  “如果我们将Div中所有的列都加上 float: left 它们会挨个向左排列,如果我们希望在页面底部有一个页脚,并不需要一个最长的列,只要加上 clear: both 就可以了”[Float Layouts]

  “使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点,即你的页面是否能够一直保持一致的展现效果将取决于浏览器的实现是否保持一致。特别是当浮动元素是一个更为复杂的布局中的一部分的话,将变得更加不堪一击。”[Containing Floats]

Clearing the floats

  “浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样,你可以为这些元素应用‘clear’属性。该属性有4种设值:clear: left, clear: right, clear: both or clear: none”[Floats and “clear”]

  有很多技巧可以做到清理浮动元素,但不引入额外的无语义标签。下面3种是比较常见的做法: a) 将容器元素一起浮动  b) 在容器元素上使用 overflow: hidden  c) 使用:after这样的css伪类。 [How to clear CSS floats without extra markup]

  “插入一个清理元素是使容器正确包裹所有浮动元素的标准做法,这样做具有将容器底部边缘‘拖拉’以包裹所含元素的效果。” [How To Clear Floats Without Structural Markup]

0
顶一下
[1] [2] [3]
2008-06-20 00:00:00    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口