html中清除浮動(dòng)和閉合浮動(dòng)是什么意思

小編給大家分享一下html中清除浮動(dòng)和閉合浮動(dòng)是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為什么要清除浮動(dòng)

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

• 父元素 靠子元素?fù)纹饋?lái)

• 清除浮動(dòng)  clear:both

<h2>清除浮動(dòng)</h2>
<div class="border-div clear">
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
</div>


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

• 閉合浮動(dòng) - 增加額外元素 clear:both

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

子元素 float:left

額外增加元素 clear:both

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <div style="clear:both"></div>
</div>

• 閉合浮動(dòng) -- 使用 br 和其自身的 html 屬性

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
    <br clear="all">
</div>

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

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

<div class="main">
    <div class="sub"></div>
    <div class="sub"></div>
</div>

以上是“html中清除浮動(dòng)和閉合浮動(dòng)是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！