更新時(shí)間:2021-08-09 來(lái)源:黑馬程序員 瀏覽量:
方式一:使用overflow屬性來(lái)清除浮動(dòng)
方式二:使用額外標(biāo)簽法
.clear{ clear:both; }
在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽,在這個(gè)標(biāo)簽中使用clear:both,來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響.
內(nèi)部標(biāo)簽:會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_(kāi).
外部標(biāo)簽:會(huì)將這個(gè)浮動(dòng)盒子的影響清除,但是不會(huì)撐開(kāi)父盒子.
注意:一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽,造成結(jié)構(gòu)的混亂.
方法三:使用偽元素來(lái)清除浮動(dòng)(after意思:后來(lái),以后)
.clearfix:after{ content:"";//設(shè)置內(nèi)容為空 height:0;//高度為0 line-height:0;//行高為0 display:block;//將文本轉(zhuǎn)為塊級(jí)元素 visibility:hidden;//將元素隱藏 clear:both//清除浮動(dòng) } .clearfix{ zoom:1;為了兼容IE }
方法四:使用雙偽元素清除浮動(dòng)
.clearfix:before,.clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; }
總結(jié):第一種方法會(huì)將超出部分隱藏在某些時(shí)候我們想清除浮動(dòng)并且保留超出部分時(shí)做不到,第二種方法會(huì)增加許多不必要的標(biāo)簽,
所以我們盡量使用第三種方法來(lái)清除浮動(dòng),為什么不選擇第四種方法呢?因?yàn)榈谒姆N是第三種的改良版雖然比較簡(jiǎn)便,但是不嚴(yán)謹(jǐn)!
頁(yè)面布局的排列規(guī)則是什么?怎樣清除浮動(dòng)標(biāo)簽?
有序列表標(biāo)簽的基本屬性簡(jiǎn)介【前端web文章】
nav標(biāo)簽怎么用?nav標(biāo)簽的有什么作用?