文档流（定位流，普通流，浮动流）

1、普通流定位 static（默认方式）

普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：按照从上到下的方式逐个排列
页面中的行内元素：按照从左到右的方式逐个排列
但是如何让多个块级元素在一行内显示?
这里就引出了浮动定位

2、浮动定位 float

float属性 取值为 left/right

脱离文档流

3、相对定位 relative

元素会相对于它原来的位置偏移某个距离，改变元素位置后，元素原本的空间依然会被保留
语法
属性：position
取值：relative
配合着 偏移属性(top/right/bottom/left)实现位置的改变

4、绝对定位 absolute

如果元素被设置为绝对定位的话，将具备以下几个特征
1、脱离文档流-不占据页面空间
2、通过偏移属性固定元素位置
3、相对于 最近的已定位的祖先元素实现位置固定
4、如果没有已定位祖先元素，那么就相对于最初的包含块(body,html)去实现位置的固定
语法
属性：position
取值：absolute
配合着 偏移属性(top/right/bottom/left)实现位置的固定

5、固定定位 fixed

将元素固定在页面的某个位置处，不会随着滚动条而发生位置移动
语法
属性：position
取值：fixed
配合着 偏移属性(top/right/bottom/left)实现位置的固定

高度塌陷问题

在文档流中，父元素的大小会被子元素撑开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
	.a{
		border: 5px solid blue;
	}
	.b{
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	
</style>
<body>
	<div class="a">
		<div class="b"></div>
	</div>
	
</body>

如图：

image-20211127161009648

如果给子元素设置浮动，就会脱离文档流，导致高度塌陷。

image-20211127161857941

因此下面的元素也会随之上移。

image-20211127162457571

解决高度塌陷问题

  1. 元素浮动
  2. 设置父元素固定高度
  3. 触发BFC

BFC 定义

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。

GIF 2021-11-27 16-48-35

  1. 当元素出发BFC后会具有如下特点：

    1. 开启BFC后，元素不会被浮动元素覆盖。

    2. 元素垂直外边距不会传递给父元素。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <style type="text/css">
      	.cube{
      		width: 100px;
      		height:100px;
      		background-color: black;
      		margin: 100px;
      	}
      </style>
      <body>
      	<div class="cube"></div>
      		<div class="cube"></div>
      </body>

      margin理应有200px，实际上只有100px。image-20211127165523997

      块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，大小为单个边距的最大值

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <style type="text/css">
      	.cube{
      		width: 100px;
      		height:100px;
      		background-color: black;
      		margin: 100px;
      	}
      	.container{
      		overflow: hidden;
      	}
      </style>
      <body>
      	<div class="container">
      	<div class="cube"></div></div>
      			<div class="cube"></div>

      用overflow：hidden出发BFC即可解决。

    3. 开启BFC后，元素可以包含浮动的子元素

如何触发BFC

  • 设置元素浮动：使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
  • 设置元素绝对定位
  • 设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
  • 将元素的overflow设置为一个非visible的值
  • display:flex;display:flow-root;

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。 display:flow-root;副作用较小，但是不兼容IE，看情况使用。

最好的解决高度塌陷clearfix

1
2
3
4
5
6
.clearfix::before,.clearfix::after{
 content:'';
display:table;
clear:both;

}

此方法既能解决高度塌陷，又能解决子元素的margin传递给父元素的问题。