13518219792
“專業、務實、高效、創新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業文化。創新互聯是您可以信賴的網站建設服務商、專業的互聯網服務提供商! 專注于成都網站制作、網站設計、軟件開發、設計服務業務。我們始終堅持以客戶需求為導向，結合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業性的建議，創新互聯建站將不斷地超越自我，追逐市場，引領市場！
float:left
左右浮動float:left; float:right;
你說的浮動式什么意思？術語來看的話，浮動就是float屬性，如果你說的是漂浮于瀏覽器界面的話，就是另外一回事了。新開了個群，283775793，關于前端開發，歡迎一起學習
Float
簡單
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。
浮動和清除浮動一般用在DIV+CSS布局時，通常情況下使用DIV+CSS布局，文檔中的對象都是從上自下依次排列，比如你寫那么默認情況下id為b 的div 排在 a的下方，我們稱這種布局為標準流，設置浮動后對象就脫離了標準流，就像水面上的漂浮物一樣，不再嚴格的按照標準流排列。浮動的取值如下：left：對象浮在左邊right：對象浮在右邊clear 清楚左，，右 浮動。。。例如下面的代碼： 此時left right bottom 3個div 是從上到下排列，如果我們給left 添加一個浮動屬性 float:left,那么3個div會從左到右排列，這是因為left 的浮動也會影響到后面的對象，如果我們給bottom 添加一句clear:both,那么bottom就不會再排在right的右邊了，這是因為我們用clear:both清除了前面浮動對象對bottom的影響
呵呵,很簡單么. left 和 right 是用來對其的,比如兩個div想要排列成一行, 就要用到做浮動和有浮動, 至于左右 不用我解釋了把? inherit是缺省值,自動繼承父div. clear簡單的說 比如a和b同行float:left了,這時候有個c不想float:left 和ab同一行, 就可以給c來個clear:left,這樣c就可以在另一行了 right同理. both是清除兩者. 嗯...也許clear這個不能舉例說,還是說實際的布局吧. 在我們寫div的時候要經常用到float那么沒有加float屬性的div很容易受到已經加了float樣式的div影響 而導致我們常說的竄位,那么這個時候我們就要用到clear來清除浮動的影響,來讓這個div顯示在我們想要的位置上.不知lz懂了沒有
我以前也被這個問題困惑過,看到網上大段的說法太概念化了 我說個我現在理解了的比較通俗的說法就是 為了讓幾個東西顯示在一排,那么就讓他們都靠左(float:left).顯示在一排里面.
別管含義啊 知道具體會出現什么效果就成了` 你又不是學者，研究其定義沒什么意義
當一個元素浮動時就脫離了標準流,其實你沒必要知道為什么會這樣,你只要知道會有這樣的效果就是了!當有元素浮動時它周邊的元素就會圍繞它! 還有就是clear屬性,就是清除浮動對它的影響,也就是不會圍繞它!就好象把浮動的元素看做沒有浮動一樣!
反向浮動
Clearing Floats
以下開始講述關于浮動的最晦澀、最難以理解的部分。
回顧一下跟隨浮動后面的靜態盒。這些盒只是忽略浮動，并且在前一個靜態盒的后面排列顯示。假設你給以下盒一個清除屬性， Some contentText not inside the float
由于div沒有被浮動，容器必須識別它并封裝它，并且由于頂部邊距（由于“clear”屬性由瀏覽器添加），該div將容器的底部邊界拉到浮動框的底部。
的確，這是一個古怪的方法，但是標準就是這樣說的。不過，W3C中有一個討論關于添加一個容器自動封裝一個浮動的規則。這樣就于更加簡單。
事實上，IE盒Opera7已經自動封裝嵌套的浮動，與標準不一樣。Opera6不是這樣，因此看來Opera在跟隨MS的非標準道路。
還可以使用 {clear:left;} 或 {clear:right;}. 這可以讓一個元素清除左側浮動當不影響右側浮動，或者相反。要使用這種控制你需要有相當的想像力。
通常來說，清除可以很好地完成，但是有時會引起不大不小的錯誤，這完全是由IE造成的。
文章出處： http://www.diybl.com/course/1_web/css/cssjs/2007927/74533_4.html
