CSS float浮动的用法

一、float 有什么作用：
通过css定义 float 可以让页面盒子元素向页面左侧、右侧浮动。

二、基本的语法：
主要有：left、right、none
float：left； 块级元素向左侧浮动
float：right； 块级元素向右侧浮动
float：none；块级元素不浮动（也可以用来清除浮动）

三、如下图：给div盒子添加左右的浮动效果

四、如下图：需要清除其中一个盒子浮动时的写法

五、需要注意的是虽然float属性解决了块级元素在一行展示的问题，但是也造成了一些的问题，下面接单的描述一下：
a、破坏流式布局的格式（就是自上往下，由左往右的排列方式，块级元素独自占一行，行元素并排展示）

b、块级元素浮动后具有包裹性（当块级元素没有设置宽时，默认是占父元素的100%，高度是内容的高度，当给块级元素设置浮动后，他的宽度变为内容的宽度）

c、让行级元素拥有块级元素的属性（行级元素本身是不能设置宽高的，但是添加浮动后拥有了块级元素的属性就可以设置宽高）

d、当父元素没有设置宽高时，父元素的所有子元素都浮动后，父元素会塌陷