CSS学习笔记（五）

发表于 更新于 分类于 阅读次数： 本文字数： 6.5k 阅读时长 ≈ 6 分钟
浮动规则,消除同一行的行内级元素之间的空隙,浮动布局案例,清除浮动

浮动规则

  • 元素浮动后，会脱离标准流；会向左或向右移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
  • 定位元素（position不是static的元素）会层叠在浮动元素上面
  • 浮动的元素不能超过包含块
  • 浮动元素不能层叠
    • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮)
    • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动（换行），直到有充足的空间为止
  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出比如行内级元素、 inline-block元素、块级元素的文字内容
1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .a {
    float: left;
    background-color: red;
    width: 100px;
    height: 100px;
  }
</style>
<div>
  <span class="a"></span>
  测试111测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
  • 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  div {
    width: 200px;
    height: 100px;
  }

  .a {
    float: left;
    background-color: red;
    width: 100px;
    height: 100px;
  }
</style>
<div>
  测试111测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
  <span class="a">span</span>
  测试111测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>

消除同一行的行内级元素之间的空隙

1
2
3
4
5
6
7
8
9
10
<style>
  span {
    background-color: red;
  }
</style>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

默认情况下，span之间会存在一定空隙，原因是span元素换行导致的

消除空隙的方法：

取消换行

1
2
3
<div>
  <span>1</span><span>2</span><span>3</span>
</div>

不推荐，代码可读性变差

父盒子设置字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  div {
    font-size: 0;
  }

  span {
    font-size: 14px;
    background-color: red;
  }
</style>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

缺点：子行内级元素需要重新设置字体

浮动

1
2
3
4
5
6
7
8
9
10
11
<style>
  span {
    float: left;
    background-color: red;
  }
</style>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

flex布局

浮动布局案例

公式：父盒子的宽度 = 子盒子的宽度 + margin-left + margin-right

此处”子盒子的宽度”为子盒子的所有宽度（包括padding，border，不包括margin-left/right）

场景：最外层的父盒子的宽度为1190px；浮动的元素宽度为230px；

基本实现

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
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1190px;
    height: 800px;
    background-color: orange;
    margin: 0 auto;
  }

  .container .item {
    width: 230px;
    height: 300px;
    background-color: pink;
    float: left;
    margin-right: 10px;
  }

  .container .item.no-margin {
    margin-right: 0;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item no-margin">5</div>
</div>

如果

1
不止有五个（可能五的倍数），此时需要将.container .item.no-margin属性进行修改

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
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1190px;
    height: 800px;
    background-color: orange;
    margin: 0 auto;
  }

  .container .item {
    width: 230px;
    height: 300px;
    background-color: pink;
    float: left;
    margin-right: 10px;
  }

  .container .item:nth-child(5n) {
    margin-right: 0;
  }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

但是（弊端），:nth-child(5n)具有兼容性问题

改进（利用上述公式）

浮动，一般浏览器都支持

公式：父盒子的宽度 = 子盒子的宽度 + margin-left + margin-right

将 “”

1
“每五个嵌套一个父盒子

1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

CSS样式修改如下

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
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1190px;
    height: 800px;
    background-color: orange;
    margin: 0 auto;
  }

  .container .item {
    width: 230px;
    height: 300px;
    background-color: pink;
    float: left;
    margin-right: 10px;
  }

  .box {
    margin-right: -10px;
  }
</style>

原因：

公式：父盒子的宽度 = 子盒子的宽度 + margin-left + margin-right

​ 1190 = auto 0 -10

类名为box的盒子没有声明宽度，则其宽度默认为auto，经浏览器计算，auto = 1200px

而1200px = (230 + 10) * 5，五个盒子恰好没有溢出

改进的其他写法：

与改进的写法大同小异

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
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1190px;
    height: 800px;
    background-color: orange;
    margin: 0 auto;
  }

  .container .item {
    width: 230px;
    height: 300px;
    background-color: pink;
    float: left;
     /* item盒子左右均5px，margin-left/right不会塌陷 */
    margin: 0 5px;
  }

  .box {
    margin: 0 -5px;
  }
</style>
<div class="container">
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

清除浮动

使用了浮动，会引入父盒子高度塌陷的问题。

因为在盒子浮动后，会脱离标准流，不在向父元素汇报高度，导致父元素的高度为0（称为高度塌陷）

清除浮动的属性：clear

clear属性来规定新的盒子必须添加到浮动的元素之下

以下为清除浮动的最佳方案（伪元素清除）

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
44
45
46
47
48
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1190px;
    height: 800px;
    background-color: orange;
    margin: 0 auto;
  }

  .container .item {
    width: 230px;
    height: 300px;
    background-color: pink;
    float: left;
    margin-right: 10px;
  }

  .box {
    margin-right: -10px;
  }

  .clear-fix::after {
    /* 共有css */
    content: '';
    display: block;
    clear: both;
    /* 考虑兼容性 */
    visibility: hidden;
    height: 0;
  }
  /* 清除浮动兼容IE 6/7 */
  .clear-fix {
    *zoom: 1
  }
</style>
<div class="container">
  <div class="box clear-fix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</div>

其他方法：

  • 额外添加一个标签，弊端：如果存在多个浮动的盒子，需要添加多个标签，维护麻烦
  • 给父元素设置固定高度（不推荐）
  • BFC
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
    overflow: hidden;
  }

  .box .item {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: left;
    margin-right: 20px;
  }
</style>
<div class="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>