浮动页面布局的那些事儿
发布于 2015-09-20
浮动是css中的定位模型之一，css属性名为float，其中有三个值（初始值为none）：
- *left *在包含框内向左浮动
- right 在包含框内向右浮动
- none 用于防止元素浮动
采用浮动布局的元素将会从正常文档流中删除，虽然它不在正常文档流中，但它还会影响正常流中的布局，是不是有点霸道？那是因为，浮动布局的本身作用是使文本能够环绕图片显示，只要元素设置了向左或向右的float属性，那么它周围的内容都会向它靠拢，注意是内容，元素的框还是无视它的，文本元素的边框不受浮动的影响，还是从正常文档流的左上角开始布局。
如图：
那么，如何消除这种效果，并且浮动块可以保持浮动呢？那就需要用到clear属性了，其中有主要有这三个值：
- left 清除元素左边的浮动
- right 清除元素右边的浮动
- both 清除元素两边的浮动
上一个例子，当将内容元素增加clear:left属性，就会出现这样的效果：
当然使用clear：both 效果一样。如果是右浮动那就使用clear：right。
下面一种情况，当包含块中两个元素都设置了浮动属性。
此时就会出现包含框Height值没有了，图中的高度是包含框Padding的值。这是因为当包含框中两个元素都设置了浮动属性，正常文档流中没有元素了，自然包含框就“瘪了”。这种情况也可以通过clear清除来修复这种情况，但是此时包含框中的两个元素都是浮动元素，肯定是本能清除它俩的，所以只能添加一个元素来进行清除。例如在包含框的最后增加
html:
<br class="clear"/>css:
.clear{ clear:both; }然后，就正常了：
然而，这种方法并不好，每次清除都需要增加一个额外的标记。下面是更好的方法：
IE下清除浮使元素haslayout就可以了，如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。非IE浏览器常用的是overflow属性，overflow:hidden;
所以兼容的做法是：
.clear{overflow:hidden; zoom:1;}小结，浮动定位用处非常的大，但是有时不是太好控制，所以当使用浮动的时候，要知道清除浮动的作用，让浮动之外的布局不受浮动影响。
