这是我参与更文挑战的第 5 天，活动详情查看： 更文挑战
CSS 中可以用 <div></div> 或者 <span></span> 来当作一个放内容的盒子，我们都知道 <div></div> 属于块级元素、内容独占一行， <span></span> 属于行内元素、不能对他设置宽度和高度，如果现在我需要让两种内容在一行中显示，又想要设置它的宽度和高度，就可以让 <div></div> 块级元素浮动起来，以实现想要的效果。
CSS 中使用 float 属性来实现浮动。浮动元素会生成一个块级元素（不论它本身是行内元素或块元素）。
float 属性值 | 描述 | 实例 |
|---|---|---|
left | 元素向左浮动 | float: left; |
right | 元素向右浮动 | float: right; |
none | 默认值，元素不浮动 | float: none; |
inherit | 从父元素继承 float 属性的值 | float: inherit; |
先在浏览器中看一下有无浮动样式的区别：
实例
float_test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float_test1</title>
<link rel="stylesheet" href="float_test1.css">
</head>
<body>
<div class="outer1">
<div class="block1">第一个div</div>
<div class="block2">想和第一个div在同一行的div</div>
</div>
</body>
</html>
float_test1.css
.outer1 {
width: 800px;
margin: 50px auto;
border: red 1px solid;
}
.block1 {
height: 60px;
width: 300px;
background-color: #d093d8;
}
.block2 {
height: 60px;
width: 300px;
background-color: #a6d5a9;
}
没有浮动的效果：
在 .block1 和 .block2 选择器中都添加浮动 float: left;
效果为：
两个 div 显示在了一行内，但是这两个 div 没有将外边的 outer1 的容器撑开。是因为浮动的元素脱离的文档流， outer1 现在在文档流里，但是 outer1 里边已经没有了元素，所以他的高度现在为 0 。那什么是文档流？我用一张图展示一下：
浮动元素会脱离文档流，跑到文档流的上层显示，浮动起来的元素默认在同一浮动层中。
左浮动为浮动起来后靠父元素的左边排列，右浮动为浮动起来后靠父元素的右边排列。
两个 div 在一行中显示的目的达到了，但是我如果想再写一个 div ，高度、宽度设置的比前两个 div 多一点，代码为：
float_test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float_test1</title>
<link rel="stylesheet" href="float_test1.css">
</head>
<body>
<div class="outer1">
<div class="block1">第一个div</div>
<div class="block2">想和第一个div在同一行的div</div>
<div class="block3">第三个div</div>
</div>
</body>
</html>
float_test1.css
.outer1 {
width: 800px;
margin: 50px auto;
border: red 1px solid;
}
.block1 {
height: 60px;
width: 300px;
background-color: #d093d8;
float: left;
}
.block2 {
height: 60px;
width: 300px;
background-color: #a6d5a9;
float: left;
}
.block3 {
height: 100px;
width: 400px;
background-color: #ffaa91;
}
在浏览器中显示效果为：
第三个新增的 div 跑到了底下，与我想让它们并排顺序显示的想法相悖。
此时需要清除浮动来让 第三个 div 全部显示出来，清除浮动有以下几种方法：
清除浮动方法 1
在浮动元素后平级位置添加空标签，并对这个空标签设置 clrea: both; 属性。
效果为：
此方法的原理是：闭合浮动元素的父元素，不允许浮动元素在左侧或者右侧或者左右侧超出父元素的范围。父元素会和子盒子最高的高度同高。
clear 属性值 | 描述 | 实例 |
|---|---|---|
left | 在左侧不允许浮动 | clear: left; |
right | 在右侧不允许浮动 | clear: right; |
both | 在左侧和右侧都不允许浮动 | clear: both; |
none | 允许浮动出现在左侧和右侧 | clear: none; |
inherit | 继承父元素的 clear 属性值 | clear: inherit; |
此方法的特点：易懂，但是要添加一个无意义的空标签，不建议使用。
清除浮动方法 2
在要清除浮动的父级元素添加 overflow: hidden; 样式，并让新添加的元素和要清除浮动的父级元素平级。通过触发BFC方式来实现清除浮动。
效果为：
当子元素的尺寸超过父元素的尺寸时，可以通过 overflow 属性设置父元素显示溢出的子元素的方式。
overflow 属性值 | 描述 | 实例 |
|---|---|---|
visible | 默认值，子元素不会被裁剪，会出现在设置高度或宽度的父元素框之外，不裁剪，不出现滚动条 | overflow: visible; |
auto | 不显示超出的子元素，不裁剪子元素，根据情况添加垂直或水平的滚动条，也可以用作清除浮动 | overflow: auto; |
hidden | 子元素会被裁剪，裁剪掉的内容不可见，也可以用作清除浮动和清除 margin-top 塌陷 | overflow: hidden; |
scroll | 不显示超出的子元素，不裁剪子元素，添加垂直和水平的滚动条，也可用作清除浮动 | overflow: scroll; |
此方法的特点：方便，但是有可能裁剪掉一些有用的如不换行的长内容这种的子元素，不建议使用。
清除浮动方法 3
为了减少多余的空标签（方法 1 ），可以在要清除浮动的父级元素添加 ::after 伪元素，并设定 content"";display: block;clrea: both; 属性。并让新添加的元素和要清除浮动的父级元素平级。
效果为：（和方法 2 效果一样）
此方法的特点：符合闭合浮动的思想，推荐使用。
过程中的一个问题
在加入第三个 div 时，第三个 div的盒子被覆盖到了底下，但是第三个 div 的文本内容并没有被脱离文档流的前两个 div 盖到底下，是因为使用float脱离文档流时，在文档流里的盒子会无视这个元素，但在文档流里的盒子内的文本内容依然会为这个元素让出位置，环绕在它周围。
为什么是这样的机制？因为 float 浮动定位的初衷一开始是作用在图像上，使文本围绕在图像周围。又因为任何元素都可以浮动，所以才广泛运用在各个元素上。如果想要使在文档流里的盒子和盒子内的文本都无视脱离浮动元素的限制，可以使用 position: absolute; 代替 float: left; 。
需要注意的点
- 浮动的元素脱离的文档流，但还在 DOM 树中。
- 清除浮动方法 3 中 添加的伪元素不在 DOM 树中。
