TIPS-清除CSS float設定

前篇文章提到用float: left解決inline-block元素間隙問題,感謝保哥提醒,發現我忘了提到它的副作用,設定float: left或float:right之後,後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如,沿用前文範例,後方再加一個<div>(顯示模式為display:block),將繼續套用float: left被接在A、B、C後方。demo

要解決問題,最直接的做法是為<div class="another">加上clear: both宣告,如下:demo

不過,此種設計邏輯並不算乾淨俐落!前方元素產生的後遺症留給後方元素善後,有違觀注點分離(SoC)理念,當後方元素搬動,換上其他元素,clear設定就得改設在新元素上。 更理想的設計應是「設定float的元素要負責消除自己的業障後遺症」,讓我們不需依特定前後關係加設CSS,如此會更簡便。而我們可以利用CSS的::after虛擬元素實現這點:demo

.layout::after是所謂的虛擬元素(或稱偽元素),瀏覽器依此設定會在<div class="layout">後方補上一個虛擬元素,其內容為空白(content:""),顯示方式為block(display: block),並指定clear: both。(註:這三條都要設定才能清除float設定)

如此,<div class="layout">後方形同多接了一個看不見的空白,其存在最重要的意義在於清除float: left設定。後方不管接上任何元素,都不需勞煩多加clear設定,是不是簡便多了?

但要留意,老IE(IE6/7/8)不支援::after!仍需要與老IE博鬥的朋友們,願原力與你們同在~

【同場加映】::after還有不少精彩的花式應用,有興趣的同學可參考Muki的介紹

歡迎推文分享:
Published 02 November 2014 10:48 PM 由 Jeffrey
Filed under:
Views: 5,128



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2014>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication