1.清除浮動(dòng)的第一種方式
給前面一個(gè)父元素設(shè)置高度
注意點(diǎn):在實(shí)際開發(fā)中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
2.清除浮動(dòng)的第二種方式
給后面的盒子添加clear屬性
CSS clear屬性
取值:left ? 告訴瀏覽器不要去找前面的左浮動(dòng)元素
right ? ?告訴瀏覽器不要去找前面的右浮動(dòng)元素
both ? ?不要去找前面的左浮動(dòng)和有浮動(dòng)元素
none ? ?默認(rèn)取值野瘦,按照浮動(dòng)元素的排序規(guī)則來(lái)排序
注意:使用這種清除浮動(dòng)方式會(huì)使margin屬性會(huì)失效
3.清除浮動(dòng)的第三種方式
隔墻法:(在實(shí)際開發(fā)中不常用)
1)妻柒、外墻法:在2個(gè)盒子之間添加一個(gè)額外的塊級(jí)元素酌予,給這個(gè)額外的塊級(jí)元素添加clear: both;屬性
注意點(diǎn):外墻法它可以讓第二個(gè)和i子使用margin-top屬性
外墻法不可以讓第一個(gè)盒子使用margin-bottom屬性
這個(gè)額外的盒子可以設(shè)置多個(gè)類名 第一個(gè)類名可以設(shè)置clear屬性 第二個(gè)類名可以設(shè)置高度
2)、內(nèi)墻法:在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性
注意點(diǎn):內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性
內(nèi)墻法它可以讓第一個(gè)盒子使用margin-bottom屬性
外墻法和內(nèi)墻法區(qū)別?
外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度
4.清除浮動(dòng)的第四種方式
使用偽元素選擇器的方式可以清除浮動(dòng)
本質(zhì)上就是內(nèi)墻法, 只不過(guò)是直接通過(guò)CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣
注意點(diǎn):IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性
5.清除浮動(dòng)的第五種方式
overflow:hidden唯袄;作用:1.可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉 ? 2.可以清除浮動(dòng)
3.如果兩個(gè)盒子是嵌套關(guān)系飒赃,那么設(shè)置了里面一個(gè)盒子頂部的外邊距冒嫡,外面一個(gè)盒子也會(huì)被頂下來(lái)释液,如果外面的盒子不想被一起頂下來(lái),那么可以通過(guò)overflow:hidden艰亮;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來(lái)
注意點(diǎn):IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性