清除浮動 or 閉合浮動

n7then 發(fā)布于2019-08-23 15:32 / 1621人閱讀

摘要：為什么要清除浮動子元素脫離文檔流會造成父元素塌陷撐不起來父元素靠子元素撐起來清除浮動清除浮動偽元素閉合浮動增加額外元素父級元素不設(shè)置子元素額外增加元素閉合浮動使用和其自身的屬性注意不推薦使用的屬性閉合浮動父元素設(shè)置閉合浮動父

為什么要清除浮動

子元素 float:left; 脫離文檔流,會造成父元素塌陷(撐不起來)

父元素靠子元素撐起來

清除浮動 clear:both

清除浮動

    
        
    
    
        
    



// 偽元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

閉合浮動 - 增加額外元素 clear:both

父級元素不設(shè)置 height

子元素 float:left

額外增加元素 clear:both

閉合浮動 -- 使用 br 和其自身的 html 屬性

==注意== clear=all 不推薦使用的屬性(moz)

閉合浮動 -- 父元素設(shè)置 overflow:hidden

閉合浮動 -- 父元素設(shè)置 display:table

云服務(wù)器 GPU云服務(wù)器清除浮動 html浮動向上浮動上下浮動左右浮動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102209.html

相關(guān)文章

清除浮動 or 閉合浮動

摘要：為什么要清除浮動子元素脫離文檔流會造成父元素塌陷撐不起來父元素靠子元素撐起來清除浮動清除浮動偽元素閉合浮動增加額外元素父級元素不設(shè)置子元素額外增加元素閉合浮動使用和其自身的屬性注意不推薦使用的屬性閉合浮動父元素設(shè)置閉合浮動父為什么要清除浮動子元素 float:left; 脫離文檔流,會造成父元素塌陷(撐不起來) 父元素靠子元素撐起來清除浮動 clear:both 清除浮動...

oysun 2019-08-30 15:55 評論0 收藏0
清除浮動 or 閉合浮動

摘要：為什么要清除浮動子元素脫離文檔流會造成父元素塌陷撐不起來父元素靠子元素撐起來清除浮動清除浮動偽元素閉合浮動增加額外元素父級元素不設(shè)置子元素額外增加元素閉合浮動使用和其自身的屬性注意不推薦使用的屬性閉合浮動父元素設(shè)置閉合浮動父為什么要清除浮動子元素 float:left; 脫離文檔流,會造成父元素塌陷(撐不起來) 父元素靠子元素撐起來清除浮動 clear:both 清除浮動...

BingqiChen 2019-08-02 14:23 評論0 收藏0
css浮動現(xiàn)象及清除浮動的方法

css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現(xiàn)文本環(huán)繞圖片的效果。除了用浮動外，目前暫無其他方法實現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

Kyxy 2019-08-29 16:29 評論0 收藏0
css浮動現(xiàn)象及清除浮動的方法

css浮動現(xiàn)象及清除浮動的方法 ? 首先先明確浮動最初的定義及使用場景：實現(xiàn)文本環(huán)繞圖片的效果。除了用浮動外，目前暫無其他方法實現(xiàn)文本環(huán)繞 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); ? 再來看看浮動的具體定義：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不...

weakish 2019-08-02 11:19 評論0 收藏0