1.1 CSS 布局的三種機制 網頁布局的核心——就是用 CSS 來擺放盒子。 CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流（標准流）、浮動和定位，其中： 普通流（標准流） 塊級元素會獨占一行，從上向下順序排列 ...

1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響？ 特征 任何定義為float的元素都會自動被設置為一個塊狀元素顯示，相當於被定義display：block；聲明。這樣就可以為浮動元素定義width和height屬性，即使是內聯顯示元素也可以。 當我 ...

一、浮動產生原因 一般浮動是什么情況呢？一般是一個盒子里使用了CSS float浮動屬性，導致父級對象盒子不能被撐開，這樣CSS float浮動就產生了。 本來兩個黑色對象盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動 ...

最近學習了float這個屬性，float可以讓元素浮動起來，浮動起來的元素脫離原來的排列層面（未完全脫離文檔流），處於上方。float的確讓元素的布局變得簡單，但是也同樣給浮動起來的元素地父級帶來一些問題。子級元素浮動起來后，不再默認繼承父級的寬高，而父級也檢測不到子級的內容 ...

父元素樣式(注意寬度必須指定才行): 最后一個子元素樣式： 效果： ...

對於浮動元素，我們知道如果父元素不設置height，而子元素全部設置為浮動，父元素不會被撐開(也就是父元素為一條直線，height為0)，我們看到的就是一條線在所有子元素上面。 例如： 結果截圖如下： 這是由於浮動元素脫離標准流而存在，對於標准流與浮動元素 ...

　　在頁面的布局過程中浮動是個好東西，我們經常會用到浮動布局，它可以使元素共享一行，極大的方便了我們的布局過程。但是很多人可能只是會用，對浮動的原理只是一知半解，如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響，那么面對代碼量龐大的頁面將會變得一頭霧水。所以接下來我們來深入 ...

利用偽元素:after清除浮動 讓頁面呈現多列布局時經常會使用 float:left/right ，可是浮動布局會導致父元素的高度為0（未設置高度的情況下），不會根據子元素的高度而變化，另外，后面不需要浮動想在下一行顯示的標簽出現在浮動元素的后面 ...