網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例9知識(shí)點(diǎn)03：元素的浮動(dòng)

我們畢業(yè)啦其實(shí)是答辯的標(biāo)題地方元素的浮動(dòng)元素的浮動(dòng)在美麗風(fēng)光網(wǎng)頁(yè)中可以看到，圖片所在的塊元素呈水平排列。元素的浮動(dòng)元素的浮動(dòng)是指設(shè)置了浮動(dòng)（float）屬性的元素會(huì)脫離標(biāo)準(zhǔn)流的控制，移動(dòng)到指定位置。在CSS中通過float屬性來(lái)設(shè)置左浮動(dòng)或右浮動(dòng)，其格式如下。浮動(dòng)屬性選擇器{float:left|right|none;}元素左浮動(dòng)或右浮動(dòng)，表示元素向左或向右移動(dòng)，直到它的外邊緣碰到父元素或另一個(gè)浮動(dòng)元素的邊框?yàn)橹埂Ｔ夭桓?dòng)。若不設(shè)置float屬性，則float屬性值默認(rèn)為none。浮動(dòng)屬性元素的浮動(dòng)例9-3example03.html元素的浮動(dòng)浮動(dòng)元素不再占用原文檔流的位置，那它會(huì)對(duì)頁(yè)面中其他元素的排版產(chǎn)生影響，我們來(lái)看下面的例子。浮動(dòng)屬性元素的浮動(dòng)例9-4example04.html不設(shè)置浮動(dòng)時(shí)的效果段落文本與塊環(huán)繞的效果元素的浮動(dòng)若想使上例中的段落文字按原文檔流的方式顯示，即不受前面浮動(dòng)元素的影響，則需要清除浮動(dòng)。元素的浮動(dòng)在CSS中，使用clear屬性清除浮動(dòng)，其格式如下。清除浮動(dòng)選擇器{clear:left|right|both;}清除左側(cè)浮動(dòng)的影響清除右側(cè)浮動(dòng)的影響同時(shí)清除左右側(cè)浮動(dòng)的影響，最常用。元素的浮動(dòng)清除浮動(dòng)對(duì)段落清除浮動(dòng)后的效果元素的浮動(dòng)友情提示:clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響，但是在制作網(wǎng)頁(yè)過程中，還會(huì)遇到一些特殊的浮動(dòng)影響。例如，對(duì)子元素設(shè)置float屬性時(shí)，如果不對(duì)其父元素定義高度，則子元素的浮動(dòng)會(huì)對(duì)父元素產(chǎn)生影響。元素的浮動(dòng)清除浮動(dòng)例9-5example05.html使用overflow屬性清除浮動(dòng)影響子元素浮動(dòng)對(duì)父元素的影響頁(yè)面結(jié)構(gòu)樣式定義清除浮動(dòng)影響，使父元素適應(yīng)子元素的高度此時(shí)，clear屬性并不能清除子元素浮動(dòng)對(duì)