浮动

# 初衷

浮动会使元素向左或是向右移动，其周围的元素也会重新排列

浮动最初初衷是为了文字环绕效果，后来也用于布局

在这里插入图片描述

# 属性

none 表示默认值，可以理解为元素不浮动
left 表示元素可以向左浮动
right 表示元素可以向右浮动

# 特点

# 汇总

浮动元素会脱离文档流，不占据文档流中的位置
设置浮动后，元素会向左或是向右开始移动
浮动元素默认不会从父元素中溢出
浮动元素向左或是向右移动的时候，不会超过它前面的其他浮动元素
如果浮动元素的上级是非浮动元素，则浮动元素无法上移
浮动元素不会超过它上边的浮动元素的兄弟元素，最多最多一样高

浮动元素会脱离文档流，不占据文档流中的位置

在这里插入图片描述

<div class="box"></div>
<div class="box1"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
  }

  .box1 {
    width: 300px;
    height: 300px;
    background: blue;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

通过上述实例可以看到，其实元素 box 设置为浮动后。脱离了文档流，不占据了原来的位置。所以 box1 的位置自然而然就往上移动了

设置浮动后，元素会向左或是向右开始移动

在这里插入图片描述

<body>
  <div class="box"></div>
  <div class="box1"></div>
</body>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background: blue;
    float: right;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

浮动元素默认不会从父元素中溢出

在这里插入图片描述

<div class="parent">
  <div class="box"></div>
  <div class="box1"></div>
</div>

<style>
  .parent {
    width: 500px;
    height: 200px;
    border: 1px solid #ccc;
  }

  .box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background: blue;
    float: right;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

但是如果父类的宽度不足的时候，浮动元素也会溢出到父元素范围之外

浮动元素向左或是向右移动的时候，不会超过它前面的其他浮动元素

在这里插入图片描述

<body>
  <div class="box"></div>
  <div class="box1"></div>
</body>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: red;
    float: left;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

如果浮动元素的上级是非浮动元素，则浮动元素无法上移

在这里插入图片描述

<body>
  <div class="box"></div>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

<style>
  .box {
    width: 200px;
    height: 200px;
    background: red;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
  }

  .box2 {
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

浮动元素不会超过它上边的浮动元素的兄弟元素，最多最多一样高

在这里插入图片描述

<div class="parent">
  <div class="box"></div>
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<style>
  .parent {
    width: 400px;
    border: 1px solid black;
  }

  .box {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
  }

  .box1 {
    float: left;
    width: 300px;
    height: 200px;
    background: yellow;
  }

  .box2 {
    float: right;
    width: 80px;
    height: 80px;
    background: black;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# BFC

BFC(Block Formatting Context) 块级格式化上下文

BFC 是 css 一个隐含的属性，可以为一个元素开启 BFC

# 特点

内部的盒子会沿着垂直方向，一个一个的放置

盒子垂直方向的距离由 marge 决定，属于同一个 BFC 的相邻 box 的上下 margin 会重叠

每个元素的左边跟包含盒子的左边接触，即使存在浮动也是如此

BFC 区域不会跟 float box 重叠

BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素

计算 BFC 的高度时，浮动元素也参数计算的

# 开启 BFC

更多方法
html 标签本身就开启了 BFC
float 属性非 none 的场合
绝对定位(absolute) 以及固定定位(fixed)
行内块级元素 inline-block
display 是 table/ table-row
overflow 不是 visible/ clip 的场合

# 实例 demo

demo 地址

# 清除浮动

首先在清除浮动之前，我们需要了解下为什么要清除浮动。原因是浮动会导致父类高度塌陷。这里会列举出几种方式。来清除浮动

# 方式 1：

使用属性clear: both; 来清除浮动

在这里插入图片描述

代码

<style>
  .outer {
    border: 1px solid red;
  }

  .box {
    width: 200px;
    height: 200px;
    background: gray;
    float: left;
  }

  .clear {
    clear: both;
  }
</style>

<div class="outer">
  <div class="box"></div>
  <div class="box1">1111</div>
  <div class="clear"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

通过上述代码中可以看出其实浮动还是对 box1 元素产生了影响。
只不过属性clear: both 清除了对最后一个元素的影响
其实属性clear: both 就是消除浮动对该元素的影响，同时添加一个 margin-top 来撑起父元素
不是最优解

# 方式 2：

利用 BFC 原理来清除浮动（BFC中在计算高度时浮动元素也会参与计算）

在这里插入图片描述

代码

<style>
  .outer {
    border: 1px solid red;
    overflow: hidden;
  }

  .inner {
    width: 100px;
    height: 100px;
    float: left;
    background: gray;
  }
</style>

<div class="outer">
  <div class="inner"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

通过上述代码可以看到，其实使用 BFC 部分原理可以清除浮动
但是其实这种方式也不是最优解

# 方式 3(终极方案)：

可以利用伪类来清除浮动 ::after/ ::before

在这里插入图片描述

代码

<style>
  .outer {
    border: 1px solid red;
  }

  .clearfix::after,
  .clearfix::before {
    content: '';
    display: table;
    clear: both;
  }

  .inner {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
  }
</style>

<div class="outer clearfix">
  <div class="inner"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

通过上述实例可以进行浮动消除。其实是两种清除方案
::before 用来消除父子间的 margin 穿透
::after 用来清除浮动的

始于清风博客

Choose mode

Css基础之浮动以及BFC

Css基础之浮动以及BFC

浮动

# 初衷

# 属性

# 特点

# 汇总

# BFC

# 特点

# 开启 BFC

# 实例 demo

# 清除浮动

# 方式 1：

# 方式 2：

# 方式 3(终极方案)：