網(wǎng)頁設(shè)計(jì)與制作（活頁式） 課件 情景8-8 浮動(dòng)的基本概念

網(wǎng)頁設(shè)計(jì)與制作CSS浮動(dòng)基本概念授課教師：吳紀(jì)磊HTMLcsscssJavaScript目錄CONTENTS12學(xué)習(xí)目標(biāo)知識(shí)講解學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01認(rèn)識(shí)CSS浮動(dòng)學(xué)習(xí)目標(biāo)02了解CSS浮動(dòng)基本概念02知識(shí)點(diǎn)講解學(xué)習(xí)導(dǎo)航

在默認(rèn)情況下，網(wǎng)頁中的元素會(huì)在瀏覽器窗口中從上到下或從左到右一一羅列，如果僅僅按照這種默認(rèn)的方式進(jìn)行排版，網(wǎng)頁將會(huì)單調(diào)、混亂，為了使網(wǎng)頁的排版更加豐富、合理，在CSS中可以對(duì)元素設(shè)置浮動(dòng)樣式。知識(shí)點(diǎn)講解

如下三個(gè)盒子，圖8.12沒有設(shè)置浮動(dòng)的位置。

當(dāng)設(shè)置三個(gè)盒子向左浮動(dòng)的時(shí)候，效果如圖8.13所示。圖8.12

未添加浮動(dòng)

圖8.13

右浮動(dòng)1、元素的浮動(dòng)屬性float什么是浮動(dòng)？元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，移動(dòng)到其父元素中指定位置的過程。如何定義浮動(dòng)？在CSS中，通過float屬性來定義浮動(dòng)。其基本語法格式如下：選擇器{float:屬性值;}1、元素的浮動(dòng)屬性float

float屬性值：屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)none元素不浮動(dòng)（默認(rèn)值）【練一練】設(shè)置了box01、box02、box03為左浮動(dòng)的效果：運(yùn)行效果2、清除浮動(dòng)

常用三種清除浮動(dòng)的方法：方法三：使用after偽對(duì)象清除浮動(dòng)。方法二：使用overflow屬性清除浮動(dòng)。方法一：使用空標(biāo)記清除浮動(dòng)。2、清除浮動(dòng)使用空標(biāo)記清除浮動(dòng)：在浮動(dòng)元素之后添加空標(biāo)記，并對(duì)該標(biāo)記應(yīng)用“clear:both”樣式，可清除元素浮動(dòng)所產(chǎn)生的影響，這個(gè)空標(biāo)記可以為<div>、<p>、<hr/>等任何標(biāo)記。overflow屬性的應(yīng)用：對(duì)元素應(yīng)用“overflow:hidden;”樣式，也可以清除浮動(dòng)對(duì)該元素的影響?？梢岳^續(xù)以上述案例為基礎(chǔ)，對(duì)父元素應(yīng)用“overflow:hidden;”樣式，來清除子元素浮動(dòng)對(duì)父元素的影響。選擇器{overflow:屬性值;}2、清除浮動(dòng)after偽對(duì)象清除浮動(dòng)：after偽對(duì)象也可以清除浮動(dòng)，該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。必須為需要清除浮動(dòng)的元素偽對(duì)象設(shè)置“height:0;”樣式，否則該元素會(huì)比其實(shí)際高度高出若干像素。必須在偽對(duì)象中設(shè)置content屬性，屬性值可以為空，如“content:"";”。02小結(jié)小結(jié)本節(jié)內(nèi)容講解了元素浮動(dòng)的設(shè)置，以及如何清除元素浮動(dòng)，達(dá)到合理布局頁面，希望