解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

 

清除浮動的幾種方法：

1，額外標簽法，

<div style="clear:both;"></div>

（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）

 

2，使用after偽類

#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

 

3，設置`overflow`為`hidden`或者auto

給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。