css常見問題解決
1、圖檔在IE6及以下有邊框
解決：給img{border：0 none}
2、div插入圖檔有間隙
解決：（1）div{font-size：0}（2）img{display：block}
3、雙倍浮動。在IE6及以下，浮動的元素，有設定margin，出現雙倍外邊距
解決：給浮動的元素設定display：inline
4、在IE6及以下版本，部分塊級元素擁有預設高度
解決：設定font-size：0
5、表單元素行高不一樣
解決：input{float：left}
6、按鈕大小不一樣
解決：在input外邊套一層标簽，添加按鈕的樣式，把按鈕的預設樣式清除
7、百分比的bug，在IE6及以下版本中，解析的時候四舍五入計算，
50%+50% > 100%,
解決：把右邊的浮動元素，clear：right
8、margin塌陷（目前元素(父元素裡面第一個子元素)與父元素沒有設定任何浮動的情況下，設定margin-top後，會錯誤的把margin-top加在父級元素上）
解決： （1）給父元素添加overflow：hidden（推薦使用）
（2）給父元素設定border
(3)給父元素或子元素設定float
9、margin合并bug（當兩個上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他們中間的距離不會疊加，而是會設定為較大的值）
解決：給兩個元素或其中一個加上display：inline-block
10、什麼是BFC
BFC塊級格式化上下文，什麼情況下建立？浮動時：float：left/right，絕對定位或固定定位時 position:absolut/fixed，預設情況下，将具有這些屬性的元素修改為display：inline-block什麼時候不能建立？float:none，display :inline-block、table-cell、table-caption、
11、如何清楚浮動
解決：（1）給浮動的父元素添加overflow：hidden，觸發BFC清楚浮動；缺點：當内容增多時，容易造成不自動換行，導緻内容被隐藏，無法顯示溢出的元素；
（2）額外添加标簽，在最後一個浮動标簽後新添一個标簽，給其設定clear：both；缺點：maigin失效，導緻兩個div之間沒有任何間隙；
（3）使用after僞元素清除浮動
.clearfix:after{
content:"";//設定内容為空
height:0;//高度為0
line-height:0;//行高為0
display:block;//将文本轉為塊級元素
visibility:hidden;//将元素隐藏
clear:both//清除浮動
}
.clearfix{
zoom:1;為了相容IE
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">額外标簽法</div>-->
</div>
<div class="footer"></div>
</body>
(4)使用before和after雙僞元素清除浮動
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)