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

浮動元素引起的問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其后

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法： 使用 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 */