携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情
前言
最开始的时候float仅是在一列文本中用来浮动图像，后面发现任何东西都可以浮动，便开始使用浮动实现整个网站的布局，但相对于其他flex、grid等布局有所不足，所以因把float布局看作传统的布局方式。
浮动
示例
我们先从其最初的用法出发去浮动文本中的图像。
<body>
<style>
.floatItem {
width: 200px;
height: 200px;
/* float: left; */
}
</style>
<img class="floatItem" src="../image/star.png"></img>
<h1>float test</h1>
<p>dfd dfaewfd wefdgfe dfdsa fdf dfd afefef v dfef efe ff</p>
</body>
我们先来看看正常排列的效果，可以看到文本标签由于都是块级元素所以都换行。
现在我们在图片元素上添加float:left属性。
可以看到文本都被图片所“推开”。这是为什么呢？
浮动元素 (这个例子中的
img元素) 会脱离正常的文档布局流，并吸附到其父容器的左边（这个例子中的body元素）。在正常布局中位于该浮动元素之下的内容（文本），此时会围绕着浮动元素，填满其右侧的空间。而除内容文本外正常排列元素节点（此例中的h1、p元素）。
我们来看看若没有文本，图片之后的元素节点将会如何排列吧
<body>
<style>
.floatItem {
width: 200px;
height: 200px;
float: left;
}
.standard {
width: 100px;
height: 100px;
border: 1px solid #333333;
background-color: black;
}
</style>
<img class="floatItem" src="../image/star.png"></img>
<div class="standard"></div>
</body>
可以看到div矩形元素直接无视脱离正常文档流的浮动元素正常排列。
从此可以总结出以下特点：
- 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
清除浮动
通过上例可以看到一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响。用clear属性应用在之后的属性上可以清除浮动。
对上例的div添加clear:left
可以看到div正常排列。clear 属性还可以接受下列值：
left：停止任何活动的左浮动right：停止任何活动的右浮动both：停止任何活动的左右浮动
