您的位置:首页网页设计HTML/CSS  → CSS定位机制之普通流详解

CSS定位机制之普通流详解

时间:2010/11/25 20:25:23来源:葵中剑作者:iifksp我要评论(0)

4 页 元素重叠的原因

这是造成元素重叠的原因。比如下面的代码:

代码:

<html>

<head></head>

<body>

<div id=“A”style=“background:gray;overflow:auto;”>

<div id=“B”style=“background:green;margin:10px10px00;float:right;”>

浮动元素m_10_10_0_0</div>

<div id=“C”style=“background:red;”>

普通流块</div>

</div>

</body>

</html>

普通流块C在容器A里排布的时候,并不受浮动元素的影响,甚至当浮动元素B不存在。但是如果C创建了新的blockformattingcontext,那么,普通流块c就会像linebox一样受到浮动元素存在的影响而缩小。

代码:

<html>

<head></head>

<body>

<div id=“A”style=“background:gray;overflow:auto;”>

<div id=“B”style=“background:green;margin:10px10px00;float:right;”>

浮动元素m_10_10_0_0</div>

<div id=“C”style=“background:red;overflow:auto;”>

普通流块</div>

</div>

</body>

</html>

关于浮动和blockformattingcontext,brunildo.org上有一份不错的参考。

说了这么多了,其实概念仍然可以很简单。普通流仅仅只是一种定位的机制。而flow本身在标准里也可以作为一个动词,就如同按顺序一个个的拿出HTML元素然后放到页面上一般。只是要注意一下formattingcontext的概念,特别是blockformattingcontext,因为其影响更大(包括边距重叠、浮动清除、元素重叠等)。

写到这里也就差不多了,由于水平所限,如文中有不当之处,请指点下,非常感谢。

相关视频

    没有数据

相关阅读 个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站(主页)变成黑白DW设计网页时组织CSS的建议

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法