浮动与清除浮动

浮动是什么？

元素的浮动是指设置浮动的元素脱离了标准文档流的控制，移动到其父元素中的指定位置的过程，碰到父元素的边框会停留。脱离文档流的元素不占据标准流的位置，因此会影响标准流。

在CSS中，通过float属性来定义浮动，其基本语法格式为 选择器 {float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动(默认值)

浮动的作用在于让块元素在同一行显示，方便我们布局，但是浮动也会产生副作用，

1. 浮动元素的父元素的高度无法撑开

2. 若与浮动元素同级的后面的盒子不浮动，后面的盒子会占据浮动元素原来的位置，浮动元素会浮在后面盒子的上面

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方法

1. 将浮动元素添加一个与元素容器包裹起来，并且给父元素设置固定高度

计算浮动元素的高度，根据浮动元素的高度来计算父元素的高度，缺点是每次设计都要人为计算，不灵活。

<style>
/* css 给父元素设置高度来清除浮动 */
.div1 {
        width: 200px;
        background-color: pink;
        height: 200px;
        overflow: hidden;
        float: left;
    }
.div2 {
        width: 200px;
        height: 200px;
        background: purple;
        float: left;
    }
.div3 {
        width: 420px;
        height: 200px;
        background: blue;
    }
.parent {
        height: 200px;
    }
</style>
<!-- html -->
<div class="parent">
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</div>
<div class="div3"></div>

2. 在最后一个浮动元素的后面添加一个空元素，设置属性clear:both清除浮动，这样父元素会自动检测子元素的高度（以最高的为准），缺点是要额外添加空元素

<style>
/*css 清除浮动*/
.clear {
     clear: both;
       }
</style>

<!-- html -->
    <div class="div1">
    </div>
    <div class="div2">
    </div>
    <div class="clear"></div>
<div class="div3"></div>

3. 给浮动元素的父元素（与第一种方法一样，也是添加了元素，但灵活性比较高）设置overflow:hidden，将第一种方法中的parent高度值的设置改为overflow:hidden这一句就好了，很容易写，就不写代码了

为什么overflow:hidden会起作用呢，这是因为overflow:hidden相当于是让父级元素紧贴内容，这样即可紧贴其对象内的内容(包括使用float的盒子)，从而实现了清除浮动

这样虽然灵活性高，但是也有缺点，内容增多的时候容易造成不自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

4. 使用伪元素after，给浮动元素的父容器添加设置after伪元素，具体设置样式为

.parent:after {
        /* 缺一不可 */
        clear: both;
        content: "";  /*以前不能设置为空，因为有些浏览器会自动为它添加空格，但是现在可以了*/
        display: block;
        height: 0;     /*如果缺少，将会占据一定的高度*/
        visibility:hidden;
    }

/*为了兼容IE6，设置zoom属性的属性值为1*/
.parent {
        zoom: 1;
        /*如果要兼容IE7以下的版本，请使用下面这种样式(去掉zoom: 1;)*/
        
        *zoom: 1; /* *表示IE7以下识别 */
}

 还有一种写法，也是利用伪元素，只需要给要父元素添加clearfix类名就可以了

.clearfix:before,
.clearfix:after {
        display: table;
        content: "";
    }
.clearfix:after {
        clear: both;
    }
.clearfix {
        *zoom: 1;
    }

设置前

 

设置后

 

注释：元素添加浮动之后，会具有行内块元素的特性(隐藏模式转换)。元素的大小完全取决于定义的大小或者内容的多少，浮动根据元素书写的位置显示相应的浮动。