CSS(2) 理解CSS浮动

一、概述
1.为什么需要使用浮动
        在标准流中，所有的块级元素都独占一行。为了让多个块级元素可以在同一行上显示，需要使用浮动或定位
    
2.语法
        float：none | left | right
        
3.浮动的特点
       (1) 让元素脱离标准流，漂浮在标准流之上。(半脱标)
        注意：浮动元素并没有脱离标准流中的文本流，即标准流中的块级元素会按照浮动元素不存在一样排列，但文本流并不会和浮动元素重叠。
        (2) 浮动元素因为脱标所以不占有标准流上的空间。
        (3)元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容大小。
        (4) 在一个父元素中，如果有多个子元素，这些子元素只要有一个浮动了，那么其他子元素一般也需要浮动
        (5) 浮动的对齐情况
            a.浮动元素向左或向右移动，直到它的外边缘碰到父元素的内边距(不会超过内边距)或上一个浮动元素的外边距为止；
            b.如果在同一行显示不下多个浮动的元素，那么浮动的元素会自动换行；
            c.如果上一个元素为标准流中的元素，那么该浮动元素总是和上一个元素的底部对齐。
            d.如果浮动元素的前后元素是都标准流中的元素，那么浮动元素的后一个元素会上移到浮动元素的前一个元素下，这时浮动元素会压着后一个元素上
    
二、浮动应用场景

1.浮动能解决文字环绕图片这一问题（浮动产生的初衷）
      因为浮动能让块级元素脱了标准流，但不能脱离文本流
    例子：
    <div id="div">  
      <img src="..imgs\123.jpg" alt="">
      <p>随便写一段文本，那么这段文本会围绕在图片周围</p>
    </div>  
    如果图片不浮动，那么图片显示一行，下面的p元素显示一行，如果图片浮动，那么p元素的文字将环绕在图片周围。
    
2.可以用浮动进行布局
    比如一个页面分为上中下三部分，中间部分分为左右2部分，那么为了让中间部分在同一行显示，需要浮动这2部分。
    *{
        padding: 0px;
        margin:0px;
    }
    
    .head{
        background-color: blue;
        width: 1000px;
        height: 80px;
    }
    .main{
        background-color: orange;
        width: 1000px;
        height: 500px;
    }
    .left{
        background-color: green;
        width: 200px;
        height: 500px;
        float: left;
    }
    .right{
        background-color: yellow;
        width: 790px;
        height: 500px;
        float: right;
    }
    .foot{
        background-color: red;
        width:1000px;
        height: 50px;
    }
    <div class="head"></div>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="foot"></div>
    

三、浮动带来的问题

1.父元素高度塌陷：当父元素中的所有子元素都是浮动时，且父元素没有height属性时，会出现父元素塌陷问题。很多时候父元素是没有也不能有height属性的
    示例：
    #dv1 {  
        border:5px solid red;  
        width:150px; 
    }
    #dv2 {  
        background-color: green;  
        width:250px; 
        height: 200px;
    } 
    img{
        width: 150px;
        height: 150px;
        float: left;
    }
    <div id="dv1">  
        <img src="C:\Users\Dell\Desktop\QQ图片20190203093706.jpg" alt="">
    </div>
    <div id="dv2"> </div>
    如果没有设置float，那么dv1的height为内容(即图片的height)的高度150px，dv2排在dv1下面。但如果设置了float，那么div的height就为0了，dv2就会向上移动从而被图片压着。
    
    解决方案：清除浮动
    
2.margin合并问题
    在没有浮动的时候，当两个垂直外边距相遇时，它们将进行合并最后形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
    在有浮动的情况下，不会出现外边距合并的问题。
    .father{
        border: 1px solid deeppink;
        width: 200px;
    }
    .son {
        float: left;
        background-color: #ccc;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    浮动的div上下外边距为20px，而不是10px。
    

四、清除浮动

1.为什么要清除浮动？
    由于浮动元素会脱离标准流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这往往不是我们想要的结果。
    为了让浮动元素后的标准流不被浮动元素压着，以及解决父元素塌陷等问题，需要清除浮动。

2.如何清除浮动？
    clear:left | right | both
    这个规则只能影响使用清除的元素本身，不能影响其他元素。
    例如：div1和div2都是左浮动且在同一行显示，如果想让div2换行，那么需要在div2中设置clear:left，而不能在div1中设置clear:right。
    注意：设置clear属性的元素可以是浮动元素，也可以是非浮动元素。
    
五、清除浮动常用的方式

1.额外标签法，应用clear:both   
    .dv1 {  
        border:1px solid orange;
        width:150px; 
    }
    .son{
        background-color: red;  
        width: 100px;
        float: left;
    }
    .dv2 {  
        background-color: green;  
        width:250px; 
        height: 200px;
    } 
    <div class="dv1">
        <div class="son">dv1 son</div>
        <div style="clear: both;"></div> <!-- 额外添加一个标签 清除浮动-->
    </div>
    <div class="dv2"></div>

     缺点： 添加许多无意义的标签，结构化较差。 

2.在父元素中设置 overflow为 hidden|auto|scroll
    .dv1 {  
        border:1px solid orange;
        width:150px; 
        overflow: auto; /* 在父元素中添加overflow:auto; */
    }
    .son{
        background-color: red;  
        width: 100px;
        float: left;
    }
    .dv2 {  
        background-color: green;  
        width:250px; 
        height: 200px;
    } 
    <div class="dv1">
        <div class="son">dv1 son</div>
    </div>
    <div class="dv2"></div>

    缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
    
3.在父元素中使用伪元素:after
    .dv1 {  
        border:1px solid orange;
        width:150px; 
    }
    .son{
        background-color: red;  
        width: 100px;
        float: left;
    }
    .dv2 {  
        background-color: green;  
        width:250px; 
        height: 200px;
    } 
    /*前置伪元素  伪元素是行内元素 正常浏览器清除浮动方法*/
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    .clearfix{
        *zoom: 1;
    }
    <div class="dv1 clearfix"> <!-- 在父元素中调用后置伪元素 -->
        <div class="son">dv1 son</div>
    </div>
    <div class="dv2"></div>

    代表网站： 百度、淘宝网、网易等

4.在父元素中使用双伪元素:before :after
    .dv1 {  
        border:1px solid orange;
        width:150px; 
    }
    .son{
        background-color: red;  
        width: 100px;
        float: left;
    }
    .dv2 {  
        background-color: green;  
        width:250px; 
        height: 200px;
    } 
    /*前后置伪元素*/
    .clearfix:before,.clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
    <div class="dv1 clearfix"> <!-- 在父元素中调用双伪元素 -->
        <div class="son">dv1 son</div>
    </div>
    <div class="dv2"></div>
    代表网站： 小米、腾讯等

    总结：推荐使用第三种或者第四中方式