《CSS規(guī)范 閉合浮動元素介紹》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334I2013.htm

.gainlayout{display:inline-block;} .gainlayout{display:block;}

所以要跨瀏覽器閉合浮動元素，可以抉擇的方式還是許多的，如何搭配使用這些 CSS 屬性就要具體情形具體剖析了，機動利用前提解釋也很有必要，要是切實不行我們回過火來還有 clear 可以用嘛。

有一種做法就是在父容器內(nèi)再插入一個額定的標(biāo)簽，并令其掃除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，不什么問題，缺點就是需要 額外的（而且通常是無語義的）標(biāo)簽，所以我個人不大愛好。后來又有了一種新的方法，使用 :after 偽類動態(tài)的嵌入一個用于肅清浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內(nèi)容用 CSS 天生,CSS表現(xiàn)屬性Display Inline-Block的深入理解，但斟酌到 IE 不支持 :after 不得不做了不少的 hack,CSS表單美化之直接輸入的Excel表格。這種方法兼容性普通，但經(jīng)由各種 hack 也可以敷衍不同瀏覽器了，同時又可以保障 html 比較清潔，所以用得仍是比較多的。再后來又有人發(fā)現(xiàn)將父容器的 overflow 設(shè)為除 visible 之外的值就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動元素，IE做作又是不支持的,CSS菜鳥學(xué)習(xí)小結(jié)，所以這種方法和上一種方法一樣都對 IE 做了不同處理（詳細(xì)就是觸發(fā)layout），不同的就是overflow 沒有 :after 偽類那么麻煩了，毛病也有，overflow 可能會產(chǎn)生一些小抵觸。在使用 overflow 之前還有過一種使用 float 的方法,css自動截取指定長度字符串，結(jié)尾顯示，就是讓父容器也浮動，這應(yīng)用到了浮動元素的一個特性——浮動元素會閉合浮動元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果，但缺陷也很顯明——父容器未必想浮動就浮動的了,css自動截取指定長度字符串，結(jié)尾顯示... 支持，究竟浮動是一種比擬特別的行為，有時布局不容許其浮動也很畸形,CSS背景：詳解background屬性。使用 float 固然在 IE 和標(biāo)準(zhǔn)兼容瀏覽器中都能閉合浮動元素，但原理卻是不同的，IE/Win 中 float 觸發(fā)了 layout 因此閉合了浮動，而在標(biāo)準(zhǔn)兼容瀏覽器中，float 其實和上一種方法中的 overflow 原理一樣，產(chǎn)生了一個“塊級格式化規(guī)模”——這是CSS 規(guī)范中提到的一種景象，它往往具備某種獨破性，特征之一就是會自動閉合內(nèi)部的浮動元素。

所以，本來在標(biāo)準(zhǔn)兼容瀏覽器中我們也可以有這么多的方法閉合一個浮動元素，而且只要要 CSS，無需其他。順帶說一下以上除了overflow，其余都有一個附加效果就是自動壓縮父容器寬度。

依照CSS標(biāo)準(zhǔn),CSS背景顏色設(shè)置方法，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內(nèi)聯(lián)盒子（通常是文本）的排列,CSS背景顏色設(shè)置代碼示例。因而當(dāng)其高度超越包括容器時，個別父容器不會自動伸長以閉合浮動元素。但是有時咱們卻需要這種主動閉合行動，詳細(xì)如何處置呢？

Tag：先容   元素   浮動   規(guī)范     浮動元素 絕對定位元素 display:inline-block zoom width/height overflow/overflow-x/overflow-y [IE7 新增] max/min-width/height [IE7 新增]

還要提一點的是 display:inline-block，這個屬性對 IE 而言自身沒什么用，實際后果只是給一個元素暗地增加了 layout，然而尺度兼容瀏覽器是認(rèn)得這個屬性的，所以要不影響這些瀏覽器，須要將 display 設(shè)回默認(rèn)。這里 IE 有一個 bug，假如先定義了 display:inline-block，而后再將 display 設(shè)回 block（這兩個 display 要先后放在兩個 CSS 申明中才有效果），那么 layout 不會消散，同時也不會影響其余閱讀器，所以目前來說，這也算一個不錯的觸發(fā) layout 的方式：

CSS規(guī)范 閉合浮動元素介紹

按照規(guī)范，以下類型的元素會產(chǎn)生一個塊級格式化范圍：

浮動元素，left 或者 right 皆可。 相對定位的元素,CSS背景定位屬性詳解。 inline-block 元素，不外這個 gecko目前不支持。 table-cell 類型元素，實在 table, table-head-group, table-row 什么的也都能夠,CSS網(wǎng)頁設(shè)計時關(guān)于字體大小的設(shè)計，還有inline-table（gecko不支撐）也同樣，由于他們都會間接發(fā)生一個匿名的 table-cell。 overflow 取值非 visible 的元素。

而對 IE/Win，它有一套本人的系統(tǒng)，就是 layout，存在 layout 的元素會自動閉合浮動元素，再來看看觸發(fā) layout 的 CSS 屬性，會發(fā)明跟上面的塊級格局化范疇有良多相似之處：

以上來看 IE 中閉合浮動元素的辦法也不少，天然也都有其局限性，要么有附帶效果，要么應(yīng)用的長短標(biāo)準(zhǔn)屬性（無奈通過驗證）。

--> [網(wǎng)站建設(shè)之]CSS規(guī)范 閉合浮動元素介紹


(責(zé)任編輯：網(wǎng)站建設(shè))
CSS規(guī)范 閉合浮動元素介紹相關(guān)文章