一、为什么要浮动：
我们先看一些问题：
①如何让多个块级盒子水平排列成一行？
②如何实现两个盒子的左右对齐？

以上问题均可以用浮动来实现。

二、浮动：
语法：

选择器 { float ：属性值 ; }

其有以下属性值：
none：元素不浮动（默认值）；
left：向左浮动；
right：向右浮动；

三、浮动的几个特性：
1、“脱标”：脱离标准普通流的控制移动到指定位置；浮动盒子不再保留原先的位置。
举个例子来理解：

未加浮动前：

.box1 {
            width: 200px ;
            height: 200px ;
            background-color: aqua ;
        }

.box2 {
            width: 300px ;
            height: 300px ;
            background-color: rosybrown ;
        }

效果如下图：

加了浮动后：

.box1 {
            float: left ;
            width: 200px ;
            height: 200px ;
            background-color: aqua ;
        }

.box2 {
            width: 300px ;
            height: 300px ;
            background-color: rosybrown ;
        }

效果如下图：

二、如果多个都设置了浮动，则它们会按照属性值一行类显示且顶端对齐排列。
举个例子：

加浮动前：

        div {
            width: 200px ;
            height: 200px ;
            background-color: aqua ;
        }

        .box1 {
            background-color: rosybrown ;
        }

        .box2 {
            background-color: royalblue ;
        }

效果如下图：

加浮动后：

        div {
            float :left ;
            width: 200px ;
            height: 200px ;
            background-color: aqua ;
        }

        .box1 {
            background-color: rosybrown ;
        }

        .box2 {
            background-color: royalblue ;
        }

效果如下图：

三、浮动元素具有行内块元素特点：
①如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是加浮动后，它的大小由内容决定；
②浮动的盒子中间没有空隙；
③行内元素也一样。

另外还整理了一些CSS的一些语法规范。（刚刚接触html的小白建议）
CSS规则由两个主要的部分构成：选择器和一条或多条声明。
例如：

p/*选择器*/{
color:red;
font-size:15px；/*声明*/
}

下面是一些相对规范的CSS代码风格：
1、样式格式书写采用展开格式：即每一个属性独占一行；
2、代码使用小写字母；
3、空格规范：
①属性值前面，冒号后面，保留一个空格；
②选择器（标签）和大括号中间保留空格；