//步驟一：css上定義偽元素： .clearfix:before,.clearfix:after { content: ""; display: block; clear: both; } //步驟二：在父級加入類名"clearfix"即可實現清楚浮動的效果 　　 ...

這個是一個很流行的清除浮動的方法，在很多大項目上已經被完全采用。 這個方法來源於positioniseverything ，通過after偽類:after和IEhack來實現，完全兼容當前主流瀏覽器。 <style type="text/css"> .clearfix:after ...

今天看bootstrap突然看到了 .container:after { clear: both; } 好像對clear的用法有點模糊，於是於是又研究一下用法。 上面搜資料總會搜到張鑫旭老師的相關文章，又把他的《准確理解CSS clear:left/right的含義及實際用途 ...

父元素高度自適應，子元素 float 后，造成父元素高度為0，稱為高度塌陷問題。 推薦使用萬能清除法解決。（給需要清除浮動的元素添加一個class名 clear） 萬能清除法代碼 父元素:after{ content: ""; height: 0; clear ...

教程開始： 首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。如下圖： 可以看出，即使div1的寬度很小，頁面中一 ...

教程開始： 首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。如下圖： 可以看出，即使div1的寬度很 ...

我們在日常代碼生活中，或多或少會利用浮動來布局，例如導航布局，如下圖所示： 但是，我們在實現的時候，經常會遇到父元素“塌陷”以及清除浮動問題。例如 View Code 上圖中的子元素（綠色），就沒有被父元素（粉紅色的線條）包裹住，這就是塌陷問題 ...

本文主要是講解如何在 html 中使用 clearfix 和 clear，針對那些剛開始了解 css 的童鞋。關於 clearfix 和 clear 的樣式在這里我就不寫了，具體樣式點擊此處。 下面就談談對於這兩個 class 的用法，首先我們先看個例子： 我們都知道使用浮動 ...