CSS文档流(Normal Flow)详细介绍

Posted 2022-07-12 哦...

原文链接

CSS 有三种基本的定位机制：普通流、浮动流、定位流。

一、文档流
文档流：可以理解为元素的一种状态，处于这种状态下的元素具有一些特性。说白了，标准文档流就是一个“默认”状态，即元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

（1）块元素

        ①多个块元素（兄弟关系）处于文档流时，从上到下各占一行排列；

         ②文档流中的块元素的width的默认值与父元素的width相同；

        ③文档流中的块元素的height的默认由子元素的狂模型的高度决定。（子元素撑起父元素）。

（2）内联元素

        ①多个内联元素在处于文档流时，从左到右依次排开，一行不足以容纳则会换行；

        ②处于文档流中的内联元素不能设置width和height，内容区大小由内容大小决定。

Q: 脱离文档流就不占据空间了吗？
A: 可以这么说。更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。

Q: 脱离文档流是不是指该元素从DOM树中脱离？
A: 不是，用浏览器的审查元素就可以看到脱离文档流的元素（例如被float了）依然会出现在dom树里，下面的截图里也可以看到。

元素脱离文档流后的变化

（1）块元素

        ①若一个块元素脱离文档流，它下面的，处于文档流中的兄弟元素会上移；

        ②多个块元素可以在同一行（比如都设置浮动）；

        ③块元素被内容撑开，也就是说，width的默认值不是父元素的width。

（2）内联元素

        可以设置width和height（变成了块元素）。

（3）口语化总结：脱离文档流，也就是将元素从普通的布局排版中拿走，不占据位置（悬空了），其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。