CSS float: left; float: right; clear: left; clear: right; clear: both; 大家都在用，但是你真的懂得它们的含义到底是什么意思吗？
CSS float 浮动布局是 CSS 最常用的布局方式之一。clear 是专门用来消除浮动带来的影响的。那么float和clear属性有哪些终极奥义呢？
假设HTML文档中有以下两个元素
<div id="A">wuxiancheng.cn</div>
<div id="B">51-n.com</div>
float: left 即左浮动，当元素A设置左浮动以后，它后面紧邻的元素B就会受到影响和元素A在同一行显示
float: right 即右浮动，当元素A设置右浮动以后，它后面紧邻的元素B就会受到影响和元素A在同一行显示
float: none; 即不浮动，是默认样式，不对后面的元素造成浮动影响。
吴先成总结：当一个元素设置浮动属性以后，影响的是它后面紧邻的一个元素，而浮动元素本身，如果它是行内元素，它会自动转变成块元素，display属性变成block.
注意：以上所说的元素A和元素B，在不特别说明的情况下都是块元素，下同。
如果有多个元素浮动，并且浮动方向相同：
当这些元素都设置了 float: left; 时，在HTML文档中最先出现的元素就会浮动到父元素的最左边，其他元素依此类推。
当这些元素都设置了 float: right; 时，在HTML文档中最先出现的元素就会浮动到父元素的最右边，其他元素依此类推。
如果设置了不同的浮动值就按设置的值浮动到父元素对应的边缘去。
对于 clear 属性：
假定设置 clear 属性的为元素B，元素B前面紧邻的为元素A.
<div id="A">wuxiancheng.cn</div>
<div id="B">51-n.com</div>
当设置 clear: left; 时，clear: left; 的含义是清除元素A的左浮动属性对元素B造成的影响，也就是说即便元素A设置了 float: left; 元素B也不会和元素A在同一行显示。
当设置 clear: right; 时，clear: right; 的含义是清除元素A的右浮动属性对元素B造成的影响，也就是说即便元素A设置了 float: right; 元素B也不会和元素A在同一行显示。
如果只对元素B只设置了清除一个方向上的浮动，如果元素A在另外一个方向有浮动，元素A仍然会影响元素B. 这时候 clear: both 就派上用场了。
当设置 clear: both; 时, clear: both; 的含义相当于同时设置了 clear: left; 和 clear: right; 元素A再怎么浮动也不会对元素B造成影响，不过实际代码中同时设置左右浮动是不会同时生效的。
明白了吗？一个元素清除浮动清除的是它前面一个元素的对应方向上的浮动对当前元素造成的影响，这一点有很多老手都没有弄懂，很多老师也没有讲明白。
|
|
