CSS之float和clear

盒子布局是现在较为流行的网页布局方式，最近的几道经典面试题都与float及clear有关。“float是魔鬼，会影响其他相邻元素；但是clear是小白，其智慧影响自身，不会对其他相邻元素造成影响”——某位大牛

一、Float属性

float就是浮动，让元素脱离文档流，让元素漂浮起来，和普通的文档流不在同一个层面上。float是将元素左右移动而不能上下移动

高度坍塌

谈到float就不得不谈到高度坍塌，那么什么是高度坍塌呢？
上面我们讲到float是让元素脱离文档流，让其不处于普通的文档流，那这必然会引起没有内容将父元素撑起来，使其高度->0，就会造成父元素高度坍塌的情况。

<style>.father {border: 2px solid black;}.brother {width: 200px;height: 200px;background-color: green;}.first {width: 100px;height: 100px;background-color: pink;float: left;}.second {width: 100px;height: 100px;background-color: red;float: left;}.third {width: 100px;height: 100px;background-color: blue;float: left;}</style>
<body><div class="father"><div class="first">元素1</div><div class="second">元素2</div><div class="third">元素3</div><!-- <div class="clear"></div> --></div><div class="brother">father的兄弟元素</div>
</body>

这就是所谓的高度坍塌，元素1，元素2，元素3都设置为了左浮动，导致父元素的上下边框贴在了一起，同时也遮住了兄弟元素的一部分。

解决办法

方法一：

给父元素添加overflow: hidden （建议）

 .father {border: 2px solid black;/* 清除浮动的常用方法 */overflow: hidden; }

方法二：

通过父元素的伪类选择器

.father::after {/* 伪对象选择器结合content使用，给选中元素添加内容 */content: '';display: block;clear: both;}

方法三：

在被影响元素的后面添加一个空元素（不建议使用，给文档添加了无意义的元素结构）

 .clear {clear: both;}

问题解决：

字围现象

在上面的代码中我们发现父元素的高度坍塌会影响到其兄弟元素，遮住了一部分

虽然遮住了一部分的兄弟元素，但是文字却没有遮住，而这种现象就是float的字围现象。

讲完了float，我们再来看看clear

二、Clear属性

clear就是清除浮动，清除当前元素左右的浮动对象（不是将浮动对象删除），更具体一点就是当前元素的边不能和前面的浮动元素相邻
这样的布局就需要用到clear属性，当我们给元素1设置float：left时，元素2会贴到元素1后面。所以我们需要清除元素1对元素2产生的影响，给元素2添加一个clear：both或clear：left，这样元素2就会到下一行去。