前端---CSS文档流

小灰灰 2022-07-24 07:10 182阅读 0赞

CSS的定位机制有3种:   普通流    浮动(float : left / right / none)  和 定位(position : static / relative / absolute)

普通流:正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局...块元素一个接着一个,填满浏览器窗口或其他窗口元素的所有可用宽度...普通流中的对象影响它们周围对象的布局...(文档流:是指从上到下,从左到右,一个挨一个的简单的正常的布局方式)

一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素；而span,strong等属于行内元素。块级元素是从上到下一行一行的排列，默认一个块级元素会占用一行，而跟在后面的元素会令起一行排列；行内元素是在一行中水平布置，从前到后的排列；如下面的[css][]代码：

<div style="background-color:Blue" mce\_style="background-color:Blue">我是块级元素，我单独占一行</div>    
   <div style="background-color:Yellow" mce\_style="background-color:Yellow">我是块级元素，我一行一行的排列</div>    
   <span style="background-color:Green" mce\_style="background-color:Green">我的行内元素，我水平的排列</span>    
   <span style="background-color:Gray" mce\_style="background-color:Gray">我是行内元素，没有那么霸道</span>

![e6d6fa6c-03ea-4bbc-b22b-805467d3e79e.png][]只要给某个DIV进行float属性或者position:absolute（不包括static/relative，这两个依然保持正常的文档流）,则这个DIV完全脱离文档流,不占任何空间,不用担心撑开它...

浮动(float : left / right / none/inherit):脱离文档流，不占空间

尽可能向左或者向右移动元素,允许后面的内容环绕它

浮动元素在包含元素的内容区域,不能扩展到段落的填充区域浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

所有的浮动元素都表现得像块级元素无论是浮动块级元素还是内嵌元素,都遵循块级别元素的显示规则,四个方向的空白边都会呈现出来...

~浮动内嵌元素

\*提供浮动文本的宽度

\*浮动内嵌元素表现为块元素

~浮动块级元素

\*必须提供浮动块元素的宽度

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止....

由于浮动框不在文档流的普通流中,所以文档的普通流中的边框表现的就像浮动框不存在一样...

[css]: http://www.caopeng.org/css/
[e6d6fa6c-03ea-4bbc-b22b-805467d3e79e.png]: https://app.yinxiang.com/shard/s51/res/e6d6fa6c-03ea-4bbc-b22b-805467d3e79e.png