本人已参与新人「创作礼活动」，一起开启掘金创作之路。
一、浮动的特点与清除浮动的方法
- 浮动元素会脱离文档流
- 浮动元素在未明确通过width或min-width设置宽度时，该元素的宽度收缩为内容最小宽度
- 浮动元素A后面跟着常规文档流元素B，那么B会当A不存在一样；但是，B中的文本内容会记住浮动元素的大小，并在排布时避开它，为其留出相应的空间；跟在浮动元素后面的行盒子会缩短，但块盒子不会缩短(观察背景色范围)———— 文本环绕图片的效果
- 清除浮动，需要给后面的元素B应用clear属性，属性值有
left、right、both、none，用于指定盒子的哪一侧不应该紧挨着浮动盒子。 - 清除浮动的原理：清除一个元素时，浏览器会在这个元素的上方添加足够大的外边距，从而将元素的上边沿垂直方向下推移到浮动元素下方；本质上是为前面的浮动元素清理出一块垂直空间。
- 清除浮动以达到父元素包裹浮动元素的效果，使用
:after伪元素来模拟额外的清除元素；注意：只有在行块或块级元素上才能清除浮动
.box:after {
content: '';
display: block;
clear: both;
}
二、代码示例
- 行盒子
.box { width: 300px; height: 200px; border: 1px solid red; }
img { float: left; width: 100px; padding: 10px; }
.box2 { background-color: pink; }
/* .box2 { background-color: pink; clear: both} 行内元素span不能清除浮动*/
<div class="box">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg" alt="">
<span class="box2">
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
</span>
</div>
- 块盒子
.box { width: 300px; height: 200px; border: 1px solid red; }
img { float: left; width: 100px; padding: 10px; }
.box2 { background-color: pink; }
/* .box2 { background-color: pink; clear: both} 行块或块级元素div才可以清除浮动*/
<div class="box">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F00%2F0B%2FChMlWl6yKqyILFoCACn-5rom2uIAAO4DgEODxAAKf7-298.jpg" alt="">
<div class="box2">
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
</div>
</div>
