浮動(dòng)的清除電子課件

電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作Design

and

Creation

of

E-commerce

WebPages

浮動(dòng)的清除主講人：傅俊THISIS導(dǎo)入：基礎(chǔ)任務(wù)分析浮動(dòng)的清除其他浮動(dòng)清除的方法Content導(dǎo)入-基礎(chǔ)任務(wù)分析

本次任務(wù)是承接前面的農(nóng)產(chǎn)品電商形象展示網(wǎng)站的首頁(yè)效果圖的樣式布局。在底部信息結(jié)構(gòu)設(shè)置完成后會(huì)發(fā)現(xiàn)由于前面塊元素的浮動(dòng)產(chǎn)生了脫標(biāo)，而版權(quán)信息為標(biāo)準(zhǔn)流，則會(huì)上提產(chǎn)生影響。要解決浮動(dòng)元素的布局影響，一般考慮采用清除浮動(dòng)。浮動(dòng)的清除實(shí)操

清除浮動(dòng)的方法有很多，這里采用一種相對(duì)簡(jiǎn)單的增加空<div>的方式。<divclass="clear"></div> <!--這個(gè)新增的盒子要求必須是塊級(jí)元素不能是行內(nèi)元素--></div>切換到樣式定義表中，定義“clear”類的樣式，如下：.clear{ clear:both; }浮動(dòng)的清除那么為什么需要清除，和清除浮動(dòng)元素相關(guān)的就是浮動(dòng)元素有一個(gè)標(biāo)準(zhǔn)流的父元素，該父元素的高度是否要給？其他浮動(dòng)清除的方法清除的方法常見(jiàn)的就是隔離法，也就是額外標(biāo)簽法。在浮動(dòng)元素末尾添加一個(gè)空的塊級(jí)元素標(biāo)簽。然后對(duì)該空的塊級(jí)元素設(shè)置浮動(dòng)清除clear屬性，該屬性可讓浮動(dòng)標(biāo)簽恢復(fù)為占用網(wǎng)頁(yè)面積的狀態(tài)，可停止浮動(dòng)標(biāo)簽對(duì)后續(xù)的影響。還有就是父元素overflow法，在浮動(dòng)的父元素標(biāo)準(zhǔn)流塊元素樣式中添加一個(gè)聲明overflow:hidden;auto也可以。除了這個(gè)方法外，現(xiàn)在還比較流行的有同樣是給標(biāo)準(zhǔn)流的父元素添加的:after偽元素法，也是隔離法的升級(jí)。該方法樣式代碼固定，通過(guò)新增加一個(gè)偽元素來(lái)增加一個(gè)行內(nèi)元素本質(zhì)還是clear。但這樣div結(jié)構(gòu)中不增加空結(jié)構(gòu)，缺點(diǎn)需要兼顧低版本瀏覽器。其他浮動(dòng)清除的方法另外還有雙偽元素法，進(jìn)一步升級(jí)加了:before，也是給父元素添加類。偽元素法現(xiàn)階段被很多大型電商企業(yè)所采用，現(xiàn)階段更流行。.clear:before,.clear:after{content:"";display:table;}.clear:after{clear:both;}.clear{*zoom:1;}電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作Design

and

Creationof

E-comm