css3之浮动流技术及清除浮动流

Dear 丶 2021-09-18 14:58 319阅读 0赞

### **浮动流的原理是：浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】** ###

**浮动流float只有两个属性，一个left左浮动，一个right右浮动。**

**浮动的原则就是：只能在块元素当前行的左右浮动，不可能上下浮动，这也是和定位最大的区别【定位没有任何限制，可以上下左右到处跑】**

### **为什么要清除浮动流：**浮动流就相当于一个有弹性的盒子，当盒子拉到最大的时候，如果没有什么东西来撑住盒子，一旦释放，盒子就会恢复到原来位置（崩塌）,浮动流的末尾增加一个div来清除浮动流就是起到支撑的作用！ ###

* {
      /**
        clear功能：可以有效防止弹性盒子回缩！
       */
      // 浮动之后(清除左边浮动),左边不能有人
      clear: left;
      // 浮动之后(清除右边浮动),右边不能有人
      clear: right;
      // 浮动之后(清除两边浮动),左右两边都不能有人
      clear: both;
    
    }

## ##

### **浮动位置总结一句话：不管当前块元素的上面块元素怎么浮动，只要确保当前块元素最后被迫顶到哪一行，那么他的位置一定在在这一行的left或right（浮动无法主动改变上下位置）** ###

**案例的核心原理：既然div2没有设置浮动，那么肯定独占一行，所以div3只能在div2下面这一行****（浮动除非是被迫顶上去，否则不可能改变上下位置，只能在当前行的左右漂浮）****的左右浮动！**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <link rel="stylesheet" href="scss/style.css">
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
    </html>

.div1 {
      width: 200px;
      height: 200px;
      background: red;
      float: left;
    }
    
    // 既然div2没有设置浮动，那么肯定独占一行，所以div3只能在div2下面这一行的左右浮动！
    .div2 {
      width: 250px;
      height:250px;
      background: black;
    }
    
    .div3 {
      width: 300px;
      height: 300px;
      background: green;
      float: left;
    }

### **最终结果：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/b997b71b952f447ebf3057ebe6a9deb8.png