辛紅

[摘 要] 主要講述了運(yùn)用最熱門的HTML5超文本標(biāo)記語言制作網(wǎng)頁，結(jié)合使用CSS3層疊樣式表語言可完善交互式網(wǎng)頁的布局，重點(diǎn)介紹浮動(dòng)與清除浮動(dòng)的應(yīng)用案例，體現(xiàn)加入CSS樣式表后網(wǎng)頁優(yōu)化的效果，同時(shí)突出浮動(dòng)與清除浮動(dòng)在網(wǎng)頁布局中的重要性。

[關(guān) 鍵 詞] CSS樣式；浮動(dòng)；清除浮動(dòng)

[中圖分類號(hào)] TP393 [文獻(xiàn)標(biāo)志碼] A [文章編號(hào)] 2096-0603（2017）31-0191-01

隨著Web前端開發(fā)技術(shù)的發(fā)展，為了更好地實(shí)現(xiàn)網(wǎng)頁的交互性，HTML與CSS技術(shù)均升級(jí)到最新版本HTML5與CSS3，為了體現(xiàn)CSS3版本在網(wǎng)頁布局中的優(yōu)越性，特針對(duì)其中重要的技術(shù)應(yīng)用案例進(jìn)行解析。

一、CSS簡(jiǎn)介

單純使用HTML標(biāo)記屬性對(duì)網(wǎng)頁進(jìn)行修飾與排版存在很大的局限與不足，如要優(yōu)化網(wǎng)頁布局，并且維護(hù)方便，就需要使用CSS實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。

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

二、CSS3浮動(dòng)應(yīng)用舉例

（一）元素的浮動(dòng)

通過設(shè)置CSS中浮動(dòng)屬性float可以使頁面元素脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中的指定位置，可以對(duì)頁面重新排版，改變網(wǎng)頁中默認(rèn)元素從上到下或從左到右的排列順序，使原來單調(diào)、混亂、呆板的網(wǎng)頁布局變得更加豐富、合理、靈活。具體應(yīng)用如圖1所示。

（二）清除浮動(dòng)

1.清除浮動(dòng)舉例

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

2.清除浮動(dòng)的方法

當(dāng)給多個(gè)子盒子定義左浮動(dòng)，而不給其父元素設(shè)置高度時(shí)，父元素不能自適應(yīng)子元素的高度，將會(huì)變成一條直線。而子元素和父元素為嵌套關(guān)系，不存在左右位置，因此不能使用clear屬性清除子元素浮動(dòng)對(duì)父元素產(chǎn)生的影響。現(xiàn)介紹三種常用清除浮動(dòng)的方法如下。

（1）使用空標(biāo)記清除浮動(dòng)

在浮動(dòng)元素之后添加空標(biāo)記，空標(biāo)記可以為