CSS重要屬性之浮動

基本屬性：

float:left；左浮動

float:right；右浮動

float:none；不浮動(一般應用于覆蓋既有浮動屬性時使用)

clear:both；清除浮動對其他元素帶來的影響

應用場景：

(1)網站大的結構布局：

在web發展最初的幾年，網頁布局都是采用table表格布局實現的，通過table的跨行跨列實現單元格的合并(類似于excle中的單元格操作) ，但隨著技術的不斷發展及網頁布局、CSS屬性的不斷升級，table布局的局限性(table>tr>td標簽嵌套過于復雜且結構不易拆分，不利于搜 索引擎抓取信息)不足以適應布局網頁使用，整體的布局逐漸轉變為div流體布局。

div流體布局最常用的就是通過浮動實現基本布局(CSS3中有彈性布局也可實現)

如圖：

兩個元素分別左右浮動便可實現兩個元素分別居左居右顯示。

注意事項：

①某一個容器中所有元素都進行了浮動屬性設置，父元素便會失去寬高，

會對其他布局元素產生影響，(此時便可以對受影響元素使用clear ：both屬性，清除浮動對自己產生的影響)，一般會使用.clearfix定義元素偽類來消除浮動的影響

②按照最標準的用法而言，某一個容器內只要有一個元素進行了浮動，所有元素都應該進行浮動，既：一浮都浮

③設置完浮動的元素脫離了當前的文檔流。可以將浮動的元素想想象為一塊泡沫，整個網頁為一片湖水，此時的浮動元素是“漂泊”在水面 之上的，如果某一個元素高度較高，此時的浮動元素便會“卡在”這里，相當于泡沫卡在了水面的枯樹枝上，便影響了整個布局。

④設置浮動的元素沒有寬高，自身寬高全由子元素“撐開”

(2)標簽元素屬性的轉化

使用浮動屬性可以實現其他元素轉換為塊級元素(但會類似于內聯塊元素橫向排列)，使用display:inline-block轉換時，元素間橫向排列 會產生間距，設置為浮動后元素間無間距。

浮動屬性在web布局使用中占有很大比重，熟練使用浮動及如何最合適的消除浮動的影響才可以在web布局中“一馬平川”。

總結

以上是生活随笔為你收集整理的css table嵌套内部table不受外部影响_HTML+CSS网页一揽子（4）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。