一、常规流布局/文档流布局(Normal Flow)(相对于盒子模型讲的)
- 将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。
二、脱离文档流
- 定义:
元素脱离常规流之后,将不再在常规流中占据空间,而是处于浮动状态(可以理解为漂浮在常规流的上方)。脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在常规流中的其他元素将忽略该元素并填补其原先的空间。 - 脱离文档流(Normal Flow)的方式
a.浮动(float)
.border1 div {
border: 1px solid red;
background-color: aquamarine;
height: 50px;
width: 50px;
margin-bottom: 50px;
text-align: center;
line-height: 50px;
float: left; //向左浮动
}
设置浮动后:
-1.父元素高度塌陷
-2.影响浮动元素后面的元素(后面的元素上浮)
-3.自身宽高,变成内容的宽高(没有设宽高时)
-4.浮动元素不遮盖内容
b.绝对定位 position: absolute
.border1 div {
border: 1px solid red;
background-color: aquamarine;
height: 50px;
width: 50px;
margin-bottom: 50px;
text-align: center;
line-height: 50px;
position: absolute;//绝对定位
}
c.固定定位 position: fixed
和绝对定位 position: absolute效果一致
-1.父元素高度塌陷
-2.元素重叠,因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
三、文本流(只适用于文本)
四、BFC(Block formatting context): 称为块级格式化上下文,是CSS中的一种渲染机制。它决定了块级元素如何对它的子元素内容进行布局,以及与子元素同级别的兄弟元素的关系和相互作用。
BFC是解决普通文档流的问题:普通文档流的布局规则
1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠
触发BFC的方式(以下任意一条就可以)
1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个