CSS層疊樣式表浮動與清除浮動技術研究

辛紅

[摘 要] 主要講述了運用最熱門的HTML5超文本標記語言制作網頁，結合使用CSS3層疊樣式表語言可完善交互式網頁的布局，重點介紹浮動與清除浮動的應用案例，體現加入CSS樣式表后網頁優化的效果，同時突出浮動與清除浮動在網頁布局中的重要性。

[關 鍵 詞] CSS樣式；浮動；清除浮動

[中圖分類號] TP393 [文獻標志碼] A [文章編號] 2096-0603（2017）31-0191-01

隨著Web前端開發技術的發展，為了更好地實現網頁的交互性，HTML與CSS技術均升級到最新版本HTML5與CSS3，為了體現CSS3版本在網頁布局中的優越性，特針對其中重要的技術應用案例進行解析。

一、CSS簡介

單純使用HTML標記屬性對網頁進行修飾與排版存在很大的局限與不足，如要優化網頁布局，并且維護方便，就需要使用CSS實現結構與表現的分離。

CSS以HTML為基礎，提供了如字體、顏色、背景的控制及整體排版等豐富的功能，可以針對不同的瀏覽器設置不同的樣式，既可以嵌入在HTML文檔中，也可以是一個單獨的外部文件，本文應用舉例使用內嵌式樣式表文件。

二、CSS3浮動應用舉例

（一）元素的浮動

通過設置CSS中浮動屬性float可以使頁面元素脫離標準文檔流的控制，移動到其父元素中的指定位置，可以對頁面重新排版，改變網頁中默認元素從上到下或從左到右的排列順序，使原來單調、混亂、呆板的網頁布局變得更加豐富、合理、靈活。具體應用如圖1所示。

（二）清除浮動

1.清除浮動舉例

由于浮動元素不再占用原文檔流的位置，使用浮動時會影響后面相鄰的固定元素，如圖2所示。其中的段落文本受到了周圍元素浮動的影響，產生了位置上的變化。如若避免浮動對其他元素的影響，就需要清除浮動，如圖2所示。

2.清除浮動的方法

當給多個子盒子定義左浮動，而不給其父元素設置高度時，父元素不能自適應子元素的高度，將會變成一條直線。而子元素和父元素為嵌套關系，不存在左右位置，因此不能使用clear屬性清除子元素浮動對父元素產生的影響。現介紹三種常用清除浮動的方法如下。

（1）使用空標記清除浮動

在浮動元素之后添加空標記，空標記可以為