css浮动

元素的浮动是指设置了浮动属性的元素会

        1、脱离标准普通流的控制

        2、移动到指定位置。

在做一些网页布局的时候标准流已经不满足我们的需要了，因此会借助浮动来完成页面布局。比如当需要多个块级元素在一行显示的时候，而display不能满足需求的时候：

或者这样

 第一种情况用display实现的时候会发现每个盒子中间有空隙，第二种display根本实现不了，而浮动能很好地解决这种问题。

浮动的语法：

选择器 {

        float： 属性值；

}

float属性值：none（默认）、left（左浮动）、right（右浮动）

浮动的口诀：浮     漏    特

浮：设置了浮动的元素漂浮在标准流上面

漏：浮动的盒子把自己的位置让给了下面的盒子，不占原来的位置，脱离了标准流，俗称“脱标”

```html

.box1 {

    width: 200px;

    height: 200px;

    background-color: rgba(255, 0, 0, 0.5);

    float: left;

}

.box2 {

    width: 150px;

    height: 300px;

    background-color: skyblue;

}

```

特：float属性会改变元素的display属性，类似转换为行内块，但是盒子之间没有缝隙。

div {

    width: 200px;

    height: 200px;

    background-color: pink;

    /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */

    /* display: inline-block; */

    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */

    float: left;

}

.two {

    background-color: hotpink;

}

注意：多个块级元素用浮动放在一起，如果父级元素装不下会自动换行

float的扩展：

1、浮动元素与父盒子的关系

            自盒子的浮动参照父盒子对齐

            不会与父盒子的边框重叠，也不会超过父盒子的内边距

2、浮动元素与兄弟盒子的关系

         在父级元素中，如果前一个盒子是

                浮动的，那么当前盒子与前一个盒子的顶部对齐；

                  普通的，那么当前盒子会显示在前一个盒子的下方。

注意：浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

清除浮动

在父级盒子很多的情况下，不方便给高度，但是子盒子浮动不占用位置导致父元素的高度为0，就影响了下面的标准流，所以会清除浮动，准确的说是清除浮动造成的影响

清除浮动本质：

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

什么时候用清除浮动：

1、父级没高度

2、子盒子浮动了

3、影响下面布局了，我们就应该清除浮动了。

清除浮动的方法：

1、额外标签法：

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

，或则其他标签br等亦可。

2、父级元素加overfloat属性

overfloat：hidden/auto/scroll

3、用after伪元素清除浮动

语法格式如下

.clearfix:after {

            content: "";   或content: ".";

            display: block;

            height: 0;

            visibility: hidden;

            clear: both;

}

.clearfix {*zoom: 1;}   /*  IE6、7专有*/

4、用双伪元素清除浮动

.clearfix:befor,

.clearfix:after {

            content: "";   或  content: ".";

            display: table;

}

.clearfix:after {

            clear: both;

}

.clearfix {*zoom: 1;}   /*  IE6、7专有*/