【筆記】學習CSS佈局11——清除浮動(chearfix hack)
阿新 • • 發佈：2018-12-01
在使用浮動的時候經常會遇到一個古怪的事情：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .clearfix { border:1px solid green; } img { float:right; } </style> </head> <body> <div class="clearfix"> <p>不......這個圖片比包含它的元素還高， 而且它是浮動的，於是它就溢位到了容器外面！</p> <img src="ilta.png" alt="#" /> </div> </body> </html>
見證奇蹟的時刻到了！有一種比較醜陋的方法可以解決這個問題，它叫做清除浮動（clearfix hack）.
讓我們加入一些新的CSS樣式：
.clearfix {
overflow: auto;
}現在再看看發生了什麼：
這個可以在現代瀏覽器上工作。如果你想要支援IE6，你就需要再加入如下樣式：
.clearfix {
overflow: auto;
zoom: 1;
}有些獨特的瀏覽器需要“額外的關照”。清除浮動這潭 水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作。