本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1. 浮动
css 浮动 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它，从而脱离文档流。css中使用 float 属性来设置元素的浮动，他有三个可选值；
- none，默认值，元素默认在文档流中排列
- left，元素会立即脱离文档流，向页面的左侧浮动
- right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值）元素会立即脱离文档流，
- 元素脱离文档流以后，它下边的元素会立即向上移动
- 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
- 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
- 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
注意 在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动以后，会完全脱离文档流。块元素脱离文档流以后，高度和宽度都被内容撑开；内联元素脱离文档流以后会变成块元素。
使用浮动后，会有高度塌陷问题。
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
根据W3C的标准，在页面中元素都一个隐含的属性叫做 Block Formatting Context简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
- 设置元素浮动 (使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题）
- 设置元素绝对定位(同上)
- 设置元素为inline-block （可以解决问题，但是会导致宽度丢失，不推荐使用这种方式)
- 将元素的overflow设置为一个非visible的值 (推荐方式)
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
overflow: hidden
解决高度塌陷最佳方案
- 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
- 这样做和添加一个div的原理一样，可以达到一个相同的效果，
- 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
.clearfix:after{
content: ""; /*添加一个内容*/
display: block; /*转换为一个块元素*/
clear: both; /*清除两侧的浮动*/
}
2. 清楚浮动
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能，clear可以用来清除其他浮动元素对当前元素的影响，可选值：
- none，默认值，不清除浮动
- left，清除左侧浮动元素对当前元素的影响
- right，清除右侧浮动元素对当前元素的影响
- both，清除两侧浮动元素对当前元素的影响（清除对他影响最大的那个元素的浮动）
3. 示例
<section>
<div class="left">1</div>
<div class="left">2</div>
<div class="right">3</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi tristique sapien ac erat tincidunt, sit amet dignissim
lectus vulputate. Donec id iaculis velit. Aliquam vel
malesuada erat. Praesent non magna ac massa aliquet tincidunt
vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
</section>
section {
box-sizing: border-box;
border: 1px solid blue;
width: 100%;
float: left;
}
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: pink;
}
.right {
float: right;
background: cyan;
}
