CSS - 文档流 and 布局（浮动、流式、定位、相对、绝对、固定）

目录

一、文档流（normal flow）

1、概念

2、BFC（Block formatting context 块格式化上下文）

 - 2.1一切皆为框

 - 2.2 无名块框

3、BFC规则

二、浮动布局

1、浮动布局概念

2、基本语法

3、实现块级元素的同行显示（文本环绕效果）---- float：left

4、实现块级元素的同行显示（布局规则）---- left（从左往右），right（从右往左）

5、父子、兄弟浮动陷阱：父盒未固定高度，存在显示覆盖问题（在不做清浮动情况下，父级不会获取子级的高度）

6、清浮动（常见四种方法）

三、流式布局（大小跟随变化而变化）

1、案例

2、流式布局相关操作

四、定位布局（position）

1、position属性

2、定位的语法

3、相对定位（relative）

4、绝对定位（absolute）

5、固定定位（fixed） --小广告

6、z-index：设置浮动显示等级

---

一、文档流（normal flow）

1、概念

  本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。

注意：本质不存在文档流概念，当一个错误的概念被绝大数人认为是对的，那么它就是对的

 

2、BFC（Block formatting context 块格式化上下文）

  块级格式化上下文：一个独立的渲染区域，只有Block-level box（块级盒）参与，它规定了内部的Block-level Box（块级盒）如何布局，并且与这个区域外部毫不相干。

 

 - 2.1一切皆为框

•   div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
•   与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
•   可以使用 display属性改变生成的框的类型，可以应用于所有标签。
    即，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。
    还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

 

 - 2.2 无名块框

  但是在一种情况下，即使没有进行显式定义，也会创建块级元素。
  类似于把一些文本添加到一个块级元素（例div）的开头，会创建块级元素。如下，即使没有把这些文本定义为段落，它也会被当作段落对待：

    
    some text
    
Some more text.

  在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

  块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。

3、BFC规则

① 内部的Box会在垂直方向，一个接一个地放置；
② Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
③ Box自身水平方向的位置由margin左或右决定(具体依据参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。

	
	
	


	
	

		

		

	
	


    /*box用来实现BFC的水平布局方式*/
	

 

二、浮动布局

 

1、浮动布局概念

如下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

 

下图中，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

 

下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

2、基本语法

float: left | right

 

 

3、实现块级元素的同行显示（文本环绕效果）---- float：left

	
	
	


	
	
	

		
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
	

 

4、实现块级元素的同行显示（布局规则）---- left（从左往右），right（从右往左）

	
	
	


	
	

		

			
1
			
2
		
	

 

5、父子、兄弟浮动陷阱：父盒未固定高度，存在显示覆盖问题（在不做清浮动情况下，父级不会获取子级的高度）

	
	
	


	
	

		
1
		
2
	
	
1234512345123451234512345

未设置父盒高度：，兄弟相容覆盖

设置父盒高度，保证父级拥有存放子级的高度：，兄弟正常显示

 

 

6、清浮动（常见四种方法）

• 目的：对父级所在容器中的Block-level Box布局不产生影响

• 原理（本质）：在浮动布局情况下，让父级获得合适的高度

① 浮动的父级设置高度
super {
    height: npx;
}
② 浮动的父级设置overflow
super {
    overflow: hidden;
}
③ 浮动的父级兄弟设置clear
brother {
    clear: left | right | both;
}
④ 浮动的父级伪类清浮动（最推荐）
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}

注意：

• 未脱离文档流：子标签在父标签未设置高度的情况下，会撑开父标签高度
• 脱离文档流：不对父级的高度进行改动
• 不完全脱离文档流（浮动后）：不清浮动，不撑开父高度；清浮动后，撑开父高度

	
	
	


	

		
1
		
2
	
	

----->>清浮动后---->>

三、流式布局（大小跟随变化而变化）

1、案例

	
	
	


	
	
	

	 	

	 	

	 	

	 	

	 	

	 	

	 	

	 	

	 	

	 	

	 
 

	 

	 	
文本
	 

2、流式布局相关操作

① 百分比设置(基于父级的长宽) %
② 窗口比设置（基于窗口的长宽） vw | vh
③ 字体控制 em | rem

四、定位布局（position）

1、position属性

• static（静态，默认值）
  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative（相对）
  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute（绝对）
  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed（固定）
  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

注意：若发生定位冲突，则左右取左，上下取上

2、定位的语法

position: static | relative | absolute | fixed;
布局方位：left | right | top | bottom

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

3、相对定位（relative）

• ① 未脱离文档流：元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• ② 以自身原有位置作为参考坐标系

4、绝对定位（absolute）

• ① 脱离文档流：元素框从文档流完全删除，并相对于其包含块定位。
• ② 以最近定位父级作为参考坐标系

5、固定定位（fixed） --小广告

• ① 脱离文档流
• ② 以文档窗口作为参考坐标系

	
	
	


	
	
	
	
	

		

	
	br*100+tab

6、z-index：设置浮动显示等级

	
	
	


	
	
	
	

		
1
		
2
		
3