文档流(定位流,普通流,浮动流)

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传递给父元素的问题。