CSS3中浮动的应用

一、浮动的作用

1.早期是用来做图文环绕效果

2.现在是用来布局页面，让垂直布局的盒子变成水平布局        

二、浮动的特点

1.浮动的盒子会脱标，不占位置

<div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

        div {
            width: 200px;
            height: 200px;
        }

        .one {
            background-color: red;
        }

        .two {
            /* 右浮动 */
            float: right;
            background-color: yellow;
        }

        .three {
            background-color: blue;
        }

2.浮动的元素比标准流高半个级别,可以覆盖标准流的元素.  

3.浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动  

        div {
            float: left;
            width: 200px;
            height: 200px;
        }

        .one {
            background-color: red;
        }

        .two {
            background-color: yellow;
        }

        .three {
            background-color: blue;
        }

4.浮动的元素会受到上面元素边界的影响  

5.浮动的元素有特殊效果

浮动元素具有行内块元素特性并且顶部对齐：一行显示多个,可以设置宽高

注意：

块级元素浮动之后不设置宽高,默认由内容撑开

行内元素浮动之后设置宽高可以生效

三、浮动的注意事项

1.浮动的盒子搭配标准流的父元素一起使用(标准流:垂直布局    浮动:水平布局)

2.浮动的时候,当父元素装不下浮动的子元素时,子元素会换行显示

3.子浮父不浮 兄弟一起浮 一浮全浮

四、如何清除浮动（面试题）

1.添加高度

2.额外标签法

3.单伪元素

4.双伪元素

5.overflow:hidden

目的:给父元素添加高度,清除子级盒子浮动带来影响