float：包裹性、破坏性、清除浮动和影响；浮动元素后的文字不移动

属性值：
left 左浮动，元素靠上靠左
right 右浮动，元素靠上靠右
none 表示不浮动，也就是常规流（默认值）

float的最初作用是：实现文字环绕效果，如下。

但是现在的float被大量用于布局，先介绍一下float的两个特性：

1. 包裹性

2. 破坏性

包裹性指的是，浮动元素的宽度会收缩到与内容一致。
通常，盒子不设置宽高的时候，默认的宽度是100%，高度由内容决定。但是浮动会使盒子产生包裹性，宽度收缩到内容的宽度。

<div style="border: 2px solid red;">
    <img src="./images/2.jpg" width="150px" height="100px">
</div>
<div style="border: 2px solid green; float: left;">
    <img src="./images/2.jpg" width="150px" height="100px">
</div>

第一个是常规流，宽度是100%，第二个是浮动元素，宽度与内容一致。
注：由于包裹性的特点，浮动元素一般需要手动设置width。

破坏性指的是，父元素的高度塌陷。
把一张图片放在div里显示：

.outer{
    width: 400px;
    background-color: lightblue;
    border: 2px solid red;
}

<div class="outer">
    <img src="./images/2.jpg" width="150px" height="100px">
</div>

如果给img元素添加float:left;特性，发现父元素的高度没了。

原因是浮动元素脱离了文档流，父元素获取不到它的高度。

浮动布局

对于块元素来说，后面没有参与浮动的元素所占的位置是浮动元素的位置。

对于行元素来说，它会接着浮动元素显示，形成环绕浮动元素的样子。

文档流和文本流

<div style="width: 60px;height: 50px;background-color: red;">div1</div>
<div style="width: 140px;height: 40px;background-color: green;">div2</div>
<div style="width: 40px;height: 70px;background-color: blue;">div3</div>
<div style="width: 90px;height: 60px;background-color: lightblue;">div4</div>

四个盒子，现在让第二个和第三个浮动，出现以下情况：

调整了蓝色盒子（第四个）的宽度后，出现了这样的情况：

为什么浮动元素后面的元素的文本内容没有跟着浮动元素一起往上移动呢？
调整了宽度之后为什么文字的位置变到最右边去了？
这里要说两个概念：文档流和文本流。
文档流是相对于盒子模型的；
文本流是相对于文字段落的。
元素浮动之后，会让它脱离文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局（视觉上浮动元素覆盖了其他元素）。
但是其他元素的文本会认同浮动元素所占据的区域，环绕它布局，也就是没有脱离文本流。
浮动元素后面元素的文字虽然对浮动元素形成环绕，但其位置依然受后面元素的宽高的影响。如果后面元素的宽度过小，文字将不能在右侧环绕，而是显示在浮动元素下方。

清除浮动

由于浮动会影响padding、margin等，为了消除这些影响，在使用浮动后可以清除浮动。

1. clear（推荐）
2. BFC

第一种方法，在浮动元素的父级中调用以下样式即可：

/*普通浏览器清除浮动方法*/
.clearfix:after{ 
    content: "";
    display: block;
    clear:both;
}
/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
.clearfix{
    *zoom: 1;
}

第二种方法，在浮动元素的父级添加如下属性：

  overflow: hidden;

两个方法推荐使用第一种，对布局零影响。

影响

（1）浮动可以让元素block化

display:inline-block; /*原来的属性*/
display:block; /*浮动后*/

（2）可以去除空格
写代码时换行会有换行空格，也可以手动加空格 
浮动会去除这些空格。

<button>按钮1</button>
<button>按钮2</button>&nbsp;&nbsp;
<button>按钮3</button>
<button>按钮4</button>

button { float:left; }