免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

譯:可以用什么方法清除浮動?

2022-05-02    分類: 網站建設

根據正在生產中的設計,以下每個 clearfix CSS 解決方案都有自己的優勢。

“Reloaded" clearfix

CSS Mojo 的 Thierry Koblentz' 寫了另一篇文章來重新審視清除浮動,強有力地證明了使用 display: block 不會禁用外邊距重疊,這比使用 display: table 更有優勢。

最新的 micro-clearfix 代碼:

.container::after {

content: ""; /* If you do not care for “old” Opera */

display: block;

clear: both;

}

(譯注:如果要支持老 Opera 瀏覽器,應使用 content: " ")

“Best That ClearFix",一個為現代瀏覽器而生的 clearfix

CSS Mojo 的 Thierry Koblentz' 指出當編碼目標為現代瀏覽器時,我們可以放心的移除 zoom 和 ::before 屬性/值轉而簡單地使用:

.container::after {

content: "";

display: table;

clear: both;

}

這種方式不支持 IE6/7

Thierry 指出:“謹慎提醒:如果你要從頭開始一個新項目,去吧!但是不要切換你現在使用的技術,因為即便你現在不打算支持老 IE 瀏覽器,你現在的規則仍能防止外邊距重疊。”

Micro Clearfix

最新的全球都采用的 clearfix 解決方案,Micro Clearfix by Nicolas Gallagher.

.container::before, .container::after {

content: "";

display: table;

}

.container::after {

clear: both;

}

.container {

zoom: 1; /* For IE 6/7 (trigger hasLayout) */

}

溢出屬性

當定位內容不會超出容器的邊距時,通常情況下該方法是優先選擇的。

http://www.quirksmode.org/css/clearing.html - 闡述如何解決與此技術有關的常見問題,即,在容器上設置 width: 100%.

.container {

overflow: hidden;

display: inline-block; /* Necessary to trigger "hasLayout" in IE */

display: block; /* Sets element back to block */

}

除了使用 display 屬性來為 IE 觸發 "hasLayout",其它屬性也可以在元素上觸發 IE 的 "hasLayout".

.container {

overflow: hidden; /* Clearfix! */

zoom: 1; /* Triggering "hasLayout" in IE */

display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */

}

另一種使用 overflow 屬性清除浮動的方式是用 underscore hack. IE 將會應用前置下劃線屬性的值,其它瀏覽器不會。zoom 屬性將會在 IE 中觸發 hasLayout:

.container {

overflow: hidden;

_overflow: visible; /* for IE */

_zoom: 1; /* for IE */

}

雖然可以工作,但使用 hack 并非理想的選擇。

"::after" 偽元素

這種老的“簡明清除”方法有允許定位元素懸掛在容器之外的優點,但是以付出更多棘手的 CSS 為代價的。

http://www.positioniseverything.net/easyclearing.html

.container {

display: inline-block;

}

.container::after {

content: "";

display: block;

height: 0;

clear: both;

overflow: hidden;

visibility: hidden;

}

.container {

display: block;

}

除非你需要支持 IE 8,你應該總是對 before 和 after 使用雙冒號 ::. 雙冒號是偽元素的標準實現,并且不再建議使用單冒號。未來可能放棄對單冒號的支持。

對元素使用"clear"屬性

簡明扼要的方法:

 <br />

很多原因證明使用清除標簽并不理想:

主要原因:你將樣式帶入到了標記中。這意味著如果你不想使用相同標記的文檔,重用標記將會變得更加困難。應該使用 CSS 在不同的上下文中對相同的標記進行格式化。

不能為你的標簽添加任何語義信息。

使你的代碼看起來不專業

在未來你想使用其他的 clearfix 解決方案時,你將不得不回過頭來刪除所有的 <br> 標簽。

當前文章:譯:可以用什么方法清除浮動?
分享網址:http://m.newbst.com/news31/148781.html

成都網站建設公司_創新互聯,為您提供企業建站靜態網站全網營銷推廣定制網站手機網站建設品牌網站建設

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

搜索引擎優化