浮动和清除浮动
float
一、浮动
要点：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，比如示例的float-left-2、float-right-1
浮动元素之后的元素将围绕它，比如示例的<p>
浮动元素之前的元素将不会受到影响，比如示例的<h1>
二、浮动元素引起的问题
高度塌陷：父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构
三、清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
注意观察上面示例<p>上clear属性为left和right的不同变化
参考：
Last updated