7.css浮动

知识点1.盒子摆放标准   普通流，浮动，定位

　　思考1:浮动div会压着普通的标准流,不占用本来的位置,多个div浮动，改变div显示方式变为行内块元素

       思考2：其实一般布局都是父div包括子div ，但是父div不设置高度，子div左右浮动，然后给子div设置高度，撑大父div

　　思考3：浮动元素和父盒子关系:1.子元素默认和父元素的border对齐 ,如果有padding 那么就和padding对齐 

      思考4：浮动元素和兄弟盒子关系第一个兄弟不浮动，第二个兄弟浮动，布局不变

建议:如果一个盒子里面有多个子盒子，其中一个要浮动，其他的应该都跟着浮动[要么都浮动，要么都不浮动]

知识点2：清除浮动

　　原因：很多时间不方便给父元素高度，但是子元素需要浮动，如果子元素浮动，那么就会导致布局变形.所以需要清除浮动，方法

　　　　1、[隔墙法] clear |left |right |both  具体在最后一个浮动元素后面添加一个元素例如<div style="clear:both"></div>

　　　　2、父元素添加overflow:hidden属性 但是有局限性

　　　　3、伪元素清除浮动  

    .clearfix:after {
        content:"";
        height: 0;
        clear:both;
        visibility: hidden;
        display: block;
    }
    
    .clearfix {
        *zoom:1;
    }

　　总结：好处 使用隔墙法:会增加页面元素，使用overflow有局限性 ，使用伪元素：可以结合2者，最好的选择