css浮动以及清除浮动的五种方法

前言 css浮动是页面布局的一种方式页面的布局方式;

1. 浮动设置：给对应的元素css属性添加float：left/right/none； (左浮动 /右浮动/ 不浮动) ;
2. 浮动原理：使当前元素脱离普通文档流，相当于浮动起来一样，浮动的框可以左右移动直到遇到包含框或者同个包含框的浮动框;
3. 元素浮动产生的影响： 浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠;父元素高度坍塌;
4. 造成父元素高度坍塌原理:原来父元素高度是由子元素撑开的,当子元素浮动起来后就会脱离普通文档流,如果全部子元素都脱离普通文档流,父容器的高度就会坍塌,变成高度为0;
   没有浮动时:
   浮动之后:
   
5. 父元素高度坍塌的最简单解决办法

   父级div定义伪类:after和zoom

<div class="fatherDiv">
    <div class="div1 clearFloatInfluence">
        　　<div class="left" >Left</div>
        　　<div class="right" >Right</div>
    </div>
</div>

       <style>
        .fatherDiv{
            width:300px;
        }
        .div1{
            background:#000080;
            border:1px solid red;
        }
        .right{
            float: right;
            width: 30%;
            height: 80px;
            background-color: red
        }
        .left{
            float:left;
            width:20%;
            height:200px;
            background-color:pink;
        }
        //最主要代码 ↓
        .clearFloatInfluence{
            zoom:1;
        }
        .clearFloatInfluence:after{
            content: '';
            display: block;
            clear:both;
            visibility: hidden;
        }
    </style>

消除父元素高度坍塌效果图: