正如多數人的認知一樣，HTML和CSS并不難學難用，從學習曲線上來說確實如此，難度甚至不如使用VIM。但是寫不寫得好又是另一回事，好的CSS代碼能用最少的代碼量實現功能，易修改且性能佳。易修改，舉個最簡單的例子，比如要求修改一個div的高寬且保持其子div自適應高寬，若是寫死了子div的高寬，修改工作很麻煩，所以最好是將子div在需求下盡可能寫成自適應，這樣修改時就只需要修改父div的高寬即可。性能佳，能用CSS實現的絕對不用js實現，不管是網頁布局還是動畫效果，原生的CSS都是快速又具備高度兼容性的選擇。
清除浮動
清除浮動是個常見問題，不少人的解決辦法是添加一個空的 div 應用 clear:both。事實上僅需要使用after偽類即可在元素尾部自動清除浮動
DIV同行排列
最容易想到的是將一行div全設置為display:inline-block，但這種做法會使得兩個div之間存在“間隔”，這個“間隔”的大小通常由font-size決定。清除間隔可以通過使用注釋的方法實現。
更好的方式自然還是使用float
靈活使用BFC
BFC（Block Formatting Context）直譯為“塊級格式化范圍”。當一個HTML元素滿足以下任何一點時，就會產生BFC:
float的值不為none
overflow的值不為visible
display的值為table-cell, table-caption或inline-block
position的值不為relative和static
BFC提供了一個環境，這個環境中的元素不會影響到其它環境中的布局。比如浮動元素形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。BFC就是一個作用范圍，可看作是一個獨立的容器，并且這個容器的布局，與這個容器外的元素毫不相干。
BFC的元素不能與浮動元素重疊，當容器有足夠的剩余空間容納 BFC 的寬度時，所有瀏覽器都會將 BFC 放置在浮動元素所在行的剩余空間內。
新聞熱點
疑難解答
