今天认识了消除浮动

一开始跟着视频学习（Pink老师黑马程序员基础教程），讲到消除浮动时，看了看案例，感觉看懂了，结果自己画前端时，遇到了难题居然没有想到用它。

网页内容需要展示很多时，父元素没办法定义固定高度，子元素浮动时就会脱标，父元素高度变成0，影响后续布局。而消除浮动，能将子元素布局到父元素中，父元素高度随着子元素浮动高度增加。

1.如下图所示，2个父盒子box1,box2；box1内放入5个向左浮动的盒子；box2内放入2个左右排列的盒子（1个左浮动，1个右浮动）。

2.为了显示效果，给box1和box2设置了高度100px和背景色：黄色、粉色。

3.未消除浮动状态下，当缩小浏览器时，box1内浮动的盒子会挤压box2内浮动的盒子，小盒子们已经全部脱标，而父盒子都还停留在标准流里，位置未变，视觉上出现了小盒子溢出大盒子了。

浏览器缩到足够小时，会出现极端情况：

4.我想实现的效果：浏览器缩小时，无论子盒子怎么浮动，视觉上看到的永远是1的子盒子在box1里面，2的子盒子在box2里面。

增加浮动，这里采用伪元素消除浮动 ，最重要一点，去掉父盒子的高度！

/* box1消除浮动 */
.first::after {
				display: table;
				content: "";
				clear: both;
			}
/* box2消除浮动 */
.second::after {
				display: table;
				content: "";
				clear: both;
			}

 保证了所有子盒子，各归其位了！

实战练习应用：