什么是css文档流

html-css024

什么是css文档流,第1张

"文档"就是页面,doctype。"流"就指输入输出的形式,其中输入应该是“布局”,输出应该是“显示”综合起来就是:页面布局和显示的形式。

就是普通流了。就像你以前用表格布局基本只涉及到文档流,如绝对定位的元素不占文档流,它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流,所以定位不好它会覆盖已有的东西。

浮动的东西也不占的,只是文档流会围绕浮动的东西。因为div布局要经常用浮动,不浮动不好布局。

如一个主div1是文档流,假设里面有(2个浮动div(高100px)),如果你不加清理,overflow或其他处理方法。

因为你的东西在两个浮动的div里,这时你接个主div2,那它是出现在div1的下面,而不是在100px下,当然ie会自动扩大高度,但其他浏览器可不会。

标准流就是标签的排列方式。

比如 <div>red</div><p>blue</p>

页面里显示,第一行是”red“,第二行是”blue“

页面里显示的顺序和代码里的顺序一致就是符合标准流的

若是给上面的标签加上浮动或定为属性,就可能脱离标准流,显示为blue在前,red在后了

比如 <div style="float:right">red</div><p>blue</p>