浮動元素脫離了文件流,其父元素也看不到它了,因而也不會包圍它。這種情況有
時候並非我們想要的,下面向大家傳授三種圍住浮動子元素的方法。記住,這三種
方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。
為了演示浮動元素的行為,這種行為對布局會產生什麼影響,以及解決這個問題的
三種方法,我們首先要從一張帶標題的開始。和標籤包含在乙個section
元素中,而section元素後面跟著乙個footer元素。可以把這個footer元素想象成
很多網頁底部都會有的與頁面同寬的頁尾。
css樣式:
csssectionp footer
html文件結構：
現在的頁面效果如下：
現在我們看到的是常規文件流,即塊級元素包圍著所有子元素,而且在頁面中自上
而下相互堆疊在一起。假設我們想讓標題位於右側,而不是像現在這樣位
於下方。運用剛剛學到的知識,我們知道實現這個目標最簡單的方式就是浮動。
試試看吧。現在我們需要給新增乙個浮動效果！
浮動以後以後的效果如下：csssection img
可以看到文字都圍繞在了周圍，但是這並不是我們想要的結果！
我們給section應用overflow:hidden之後，達到了我們想要的布局效果
效果圖如下：csssection
實際上,第二種促使父元素包圍其浮動子元素的方法,是也讓父元素浮動起來。overflow:hidden宣告的真正用途是防止包含元素被超大內容撐大。應用
overflow:hidden之後,包含元素依然保持其設定的寬度,而超大的子內容則會被容器剪下掉。除此之外,
overflow:hidden還有另乙個作用,即它能可靠地迫使父元素包含其浮動的子元素。
浮動csssectionsection img
p footer
section以後,不管其子元素是否浮動,它都會緊緊地包圍(也稱收縮包裹)住它的子元素。因此,需要用width:100%再讓section與瀏覽器容器同寬。另外,由於section現在也浮動了,所以 footer 會努力往上擠到它旁邊去。為了強制footer依然呆在section下方,要給它應用clear:left。被清除的元素不會被提公升到浮動元素的旁邊。
第三種強制父元素包含其浮動子元素的方法,就是給父元素的最後新增乙個非浮動的子元素,然後清除該子元素。由於包含元素一定會包圍非浮動的子元素,而且清除會讓這個子元素位於(清除一側)浮動元素的下方,因此包含元素一定會包含這個子元素——以及前面的浮動元素。在包含元素最後新增子元素作為清除元素的方式有兩種。
插入乙個用於清除浮動的空元素：css.clear_float
同樣，更簡潔的方式是宣告乙個clearfix類， 然後把這個類應用於section標籤：
css.clearfix:after
圍住浮動元素（消除浮動）的三種方法
浮動多用於多欄布局中，浮動元素脫離了文件流，其父元素看不到它，因而也就不會圍住它。為了控制浮動效果，有時候需要清除浮動。1 對元素浮動 考慮一種情形，假如我們需要將文字放在的右側，該怎麼做呢？最為常用的方式是對進行浮動。為了演示，我們先建立乙個網頁，頁面 如下 1 doctype html 2 ht...
清除浮動的三種方法
lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...
清除浮動的三種方法
在我使用浮動時，為我們帶來了便利的同時也帶了一點影響，我們在使用浮動時往往不會給父級盒子新增高度，因為子盒子會撐起父盒子。這樣一旦我們使用浮動，則下面使用的div會跑到父級盒子的位置，畢竟使用浮動，不占有位置，解決此問題我列出了三種方法，希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...