浮動的特點：
1. 使塊元素在同一行顯示
2. 使內嵌支援寬高
3. 不設寬高則由內容撐開
4. 脫離文件流，按照指定的乙個方向去移動，直到碰到父級的邊界或者另外乙個浮動元素停止
5. 提公升層級半層，元素可以分為上下兩層，下層是具有樣式的元素本身，上層是元素裡的內容，浮動只浮動了半層。所以另乙個元素擠進來的時候，只能下半身擠了進入，上半身會被擠掉
文件流：文件中可顯示物件在排列時所占用的位置
清浮動：
對於父級包含子級的情況，子級加了浮動之後會脫離文件流，導致父級包不住子級，所以有浮動必清浮動。下面是清浮動的幾種方法。
1.父級也加浮動，這樣不提倡，可能會導致整個頁面上的元素都浮動。父級margin左右自動失效
2.給父級加display:inline-block,父級不會浮動，子級也會把父級撐開, 但是父級的margin左右自動失效
3.在浮動元素下加空元素
，並設定屬性.clear
給父級加乙個非浮動的子元素，讓其排在浮動元素後面並clear:both(這樣會被子元素擠掉下來)，設定子元素高度為0。但是會有相容性問題，即ie6下最小高度問題，在ie6下高度小於19px的元素，高度會被當做19px來處理。解決方法是子元素加乙個font-size:0px;不能完全解決，只能解決到最小2px
4.在浮動元素下加
br標籤中的clear=」all」屬性相當於clear:both屬性，clear也有left和right的值，相當於clear:both;
不符合w3c標準，即結構、樣式、行為相互分離的原則，浮動是由於子元素的一條樣式引起的，而我們為了解決它而改了結構
5.after偽類
p:after content可以追加內容，並給且只給追加的內容加樣式(即background: red;只加在追加的內容的後面)
設定乙個屬性，.clear:after
然後浮動元素的父級元素class裡再加上這個clear
但是ie6,7下只支援
的四個偽類，不支援after
解決方法：給父級加乙個.clear:after 觸發ie6,7下父級元素的haslayout
**在ie6,7下的haslayout機制
haslayout是ie瀏覽器渲染引擎的一部分，預設為false不觸發
//一旦觸發，就會使元素根據元素內容的大小，或者父級的大小來重新計算元素的寬高
元素加了以下屬性會觸發haslayout
display：inline-block
height:(任何值除了auto)
float:(left或right)
width：(任何值除了auto)
zoom：(除normal外任意值)
6.給浮動元素的父級加overflow，ie6下不好用，所以要配合zoom:1
溢位overflow：auto溢位顯示滾動條
scroll預設就顯示滾動條
hidden 溢位隱藏
auto vs scroll ：scroll預設顯示滾動條，不溢位也會顯示滾動條，auto溢位顯示，不溢位不顯示滾動條
清浮動原理及方式
浮動清理的必要性 當父盒子不浮動，子盒子浮動，子盒子會脫離父盒子的束縛，也就是造成父盒子塌陷，子盒子不浮動時 子盒子如圖 子元素浮動後，父元素預設為0，即 cd如圖 解決方式有這麼幾個 方法1,父盒子定義height，適用于父盒子固定，原理 這樣父盒子自己設定高度，就不用子盒子撐開了，適用於父級元素...
Python 浮動 清浮動
浮動布局 一.display總結 css inline 1.同行顯示,就相當於純文字,當一行顯示不下,如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷 2.支援部分css樣式,不支援寬高 行高 行高會對映到父級block標籤 ...
浮動原理及清浮動筆記
一句話解釋 元素浮動後，會脫離文件流，接著會按照指定的方向移動，一直到碰到父級的邊界或另外乙個元素為止。浮動的 folat left right none，none 表示為不浮動，完全沒有浮動的效果。使塊元素在一行顯示 使內嵌支援寬高 不設定寬度時，寬度由內容撐開 脫離文件流 文件流是文件中可顯示物...