浮动的特点

  1. 一旦元素设置了浮动，元素就会脱离文档流，它原来在文档流得位置， 就会被它下面的元素挤上来
  2. 如果浮动元素它上面的元素不浮动，则浮动元素无法上移
  3. 浮动元素也不会超过它前面浮动元素
  4. 浮动元素不会超出它的父元素
  5. 当浮动元素遇到了文字，浮动元素不会覆盖文字， 文字会环绕在浮动元素的周围，从而有文字环绕图片的效果。 这也是设置浮动最开始的想要的效果。
  6. 当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后， 元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块。

什么是高度塌陷？

一般情况下，我们是不给父元素设置高度的， 让其内部的子元素自动撑开父元素的高度， 这样父元素的高度就可以随着子元素高度的变化而变化 ,.然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷

高度塌陷的解决方案

解决方案一、

给父元素设置自己的高度，但不推荐使用。

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
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title></title>
   <style type="text/css">

     .outer {
       border: 10px red solid;
       height: 100px;
     }

     .inner {
       width: 100px;
       height: 100px;
       background-color: blue;
       float: left;
     }

     .box3 {
       height: 100px;
       background-color: yellow;
     }
   </style>
 </head>
 <body>
   <div class="outer">
     <div class="inner"></div>
   </div>

   <div class="box3"></div>
 </body>
</html>

解决方案二、

给元素开启BFC（块级格式化上下文）
BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块
具有一些特点，这些特点，可以帮助我们解决一些问题

  1. 开启BFC的元素，垂直方向外边距不会重叠
  2. 开启BFC的元素，不会被浮动元素覆盖
  3. 开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题

如何开启BFC

  1. 设置浮动
    可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
  2. 将元素转成行内块
    可以解决高度塌陷，但宽度会丢失，且有三像素问题
  3. overflow属性 非visible值 比如:overflow:hiddren
    副作用最小，建议使用
  4. 开启绝对定位
    可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响
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
49
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .outer {
        border: 10px red solid;
        float: left;
        /* display: inline-block; */
        /* overflow: hidden; */
        /* 开启绝对定位 */
        /* position: absolute; */
      }
 
      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 设置透明度  0-1  0是透明，1是不透明*/
        opacity: .3;
 
        float: left;
      }
 
      .box3 {
        height: 100px;
        background-color: yellow;
        /* 解决外边距重叠问题 */
        overflow: hidden;
 
      }
      /* .box4{
        width: 50px;
        height: 50px;
        background-color: green;
        margin-top: 50px;
      } */
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3">
        <div class="box4"></div>
    </div>
  </body>
</html>

清除浮动

clear可以用来清除其他浮动元素对当前元素的影响
 可选值：
   none，默认值，不清除浮动
   left，清除左侧浮动元素对当前元素的影响
   right，清除右侧浮动元素对当前元素的影响
   both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: right;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        float: left;
      }
      /* 需求：消除box2浮动对box3的影响 */
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear: both;
      }
    </style>
  </head>
  <body>
    <!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

解决高度塌陷方案三

可以在浮动元素下面添加一个空白的块元素，由于这个块元素没有浮动，还在文档流中
可以给这个块元素设置清除浮动，让其撑开父元素的高度
缺点是页面多了一个空白的结构

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
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }
 
      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box3{
        background-color: yellowgreen;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </bod

解决方案四

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }
 
      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .clearfix::after {
        content: "";
        /* display: block; */
        display: table;
        clear: both;
      }
      .w{
        width: 1200px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
      <!-- <div></div>  -->
    </div>
  </body>
</html>

完善方法

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
49
50
51
52
53
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
        /* 父子外边距重叠解决一 */
        /* overflow: hidden; */
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 100px;
      }
 
      /* 演示高度塌陷 */
      .box3 {
        border: 10px red solid;
      }
 
      .box4 {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        float: left;
      }
      /* 
      解决父子外边距重叠
      解决高度塌陷 
      */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
 
    </style>
  </head>
  <body>
    <div class="box1 clearfix">
      <div class="box2"></div>
    </div>
    <div class="box3 clearfix">
      <div class="box4"></div>
    </div>
  </body>
</html>