CSS浮动

#

# 浮动

float属性最初用于在一段文本内浮动图像，实现文字的环绕效果；早期没有提供较好的左右布局方案，在一段时间内成为网页布局的解决方案
绝对定位、浮动都会让元素脱离文档流，以达到灵活布局的效果
浮动的常见取值

none: 不浮动，默认值
left: 左浮动
right: 右浮动

# 浮动规则

规则一

元素一旦浮动后会脱离标准流

元素向左或者向右移动，直到自己的边界紧贴着包含块(一般是父元素)或者其它浮动元素的边界为止
块级元素第一个元素浮动，后面的元素没有浮动；因为第一个浮动的元素已经脱标，后面的块级元素会被浮动元素覆盖
定位元素会层叠浮动在元素上面

Snipaste_2022-07-06_08-06-40

规则二

如果元素是向左/右浮动，浮动元素的左/右边界不能超出包含块的左/右边界

规则三

浮动元素之间不能层叠

如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动的元素(左浮动找左浮动，右浮动找右浮动)
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，知道有充足的空间为止

Snipaste_2022-07-06_08-32-39

浮动规则四

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出。比如行内级元素、inline-block 元素，块级元素文字的内容

浮动规则五

行内级元素、inline-block 元素浮动后，其顶部将与所在行的顶部对齐

# 浮动案例

练习一

浮动常用的场景：解决行内级元素、inline-block 元素的水平间隙问题

将多个行内元素的中间的空格(间隙)去除的方法

删除换行符，所有的行内级元素写在同一行，这样会造成代码可读性很差
将父级元素的 font-size 设置为 0. 但是子元素的字体需要重新设置
通过子元素(例如 span)统一向一个方向浮动即可
flex 布局

练习二

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #eee;
  }
  .container {
    width: 1190px;
    margin: 0 auto;
    background-color: yellow;
  }
  .content {
    margin-right: -10px;
  }
  .content::after {
    content: "";
    display: block;
    clear: both;
  }
  .box {
    width: 230px;
    height: 320px;
    float: left;
    background-color: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
<div class="container">
  <div class="content">
    <div class="box item1"></div>
    <div class="box item2"></div>
    <div class="box item3"></div>
    <div class="box item4"></div>
    <div class="box item5"></div>
    <div class="box item6"></div>
    <div class="box item7"></div>
    <div class="box item8"></div>
    <div class="box item9"></div>
    <div class="box item10"></div>
  </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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Snipaste_2022-07-07_08-03-21

这里container 的宽度(1190px) = content 的宽度(auto/1200px)+margin-right(-10px)

练习三

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #eee;
  }
  .container {
    width: 1190px;
    margin: 0 auto;
    background-color: yellow;
  }
  .content {
    margin-right: -10px;
  }
  .content::after {
    content: "";
    display: block;
    clear: both;
  }
  .box {
    width: 290px;
    float: left;
    background-color: #fff;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .left {
    height: 370px;
  }
  .right {
    height: 180px;
  }
</style>
<div class="container">
  <div class="content">
    <div class="box left"></div>
    <div class="box left"></div>
    <div class="box right"></div>
    <div class="box right"></div>
    <div class="box right"></div>
    <div class="box right"></div>
  </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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

Snipaste_2022-07-07_08-24-44

# 浮动的问题 --- 高度塌陷

浮动会存在高度塌陷的问题，由于浮动元素脱离了标准文档流变成了脱标元素，所以不再向父元素汇报高度，父元素在计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题

# 清除浮动

解决父元素高度坍塌问题的过程一般叫做清除浮动。

清除浮动的目的

让父元素计算总高度的时候把浮动子元素的高度也算进去

# 使用 clear 属性清除浮动

使用clear属性清除浮动
clear 属性的作用：clear属性可以指定一个元素是否必须移动(清除浮动后)到它之前的浮动元素下面

clear 常用的取值

left: 要求元素的顶部低于之前生成的所有左浮动元素的底部
right: 要求元素的顶部低于之前生成的所有右浮动元素的底部
both: 要求元素的顶部低于之祈安生成的所有浮动元素的底部
none: 默认值，无特殊要求

# 清除浮动的方法

方案一

给父元素设置固定高度，但是扩展性不好

方案二

在父元素最后增加一个空的块级子元素，并且让它设置 clear:both
缺点

<div class="father">
  <div class="son"></div>
  <div class="clear"></div>
</div>
<style>
.father{
  background-color: pink;
  width: 400px;
}
.son{
  float: left;
  background-color: skyblue;
  height: 100px;
  width: 200px;
}
.clear{
  clear: both
}
</style>

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

会增加很多无意义的标签，不便于维护
违反了结构与样式分离的原则

方案三

给父元素添加一个伪元素

<div class="father clearfix">
  <div class="son"></div>
</div>
<style>
.father{
  background-color: pink;
  width: 400px;
}
.son{
  float: left;
  background-color: skyblue;
  height: 100px;
  width: 200px;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;

  visibility: hidden; /**浏览器兼容性处理 */
  height: 0; /**浏览器兼容性处理 */
}
.clearfix{
  *zoom: 1; /* IE6/7兼容，缩放的意思 */
}
</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

方案四

使用双伪元素清除

<div class="father clearfix">
  <div class="son"></div>
</div>
<style>
.father{
  background-color: pink;
  width: 400px;
}
.son{
  float: left;
  background-color: skyblue;
  height: 100px;
  width: 200px;
  margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
}
.clearfix::after{
  clear: both
}
</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

方案五

给父元素设置overflow: hidden ,实际上是触发了BFC

<div class="father">
  <div class="son"></div>
</div>
<style>
.father{
  background-color: pink;
  width: 400px;
  overflow: hidden;
}
.son{
  float: left;
  background-color: skyblue;
  height: 100px;
  width: 200px;
  margin-top: 10px;
}
</style>

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

特殊作用
除了解决清除浮动的问题，还解决了margin塌陷的问题

# 布局方案对比

定位方案	应用场景
标准流	垂直布局
绝对定位	层叠布局
浮动	水平布局

#浮动

上次更新: 2022/07/11, 08:35:13

← CSS定位 float布局→