html中清除浮動和閉合浮動是什么意思

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

為什么要清除浮動

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

• 父元素 靠子元素撐起來

• 清除浮動  clear:both

<h2>清除浮動</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;
}

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

父級元素不設置 height

子元素 float:left

額外增加元素 clear:both

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

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

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

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

• 閉合浮動 -- 父元素設置 overflow:hidden

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

• 閉合浮動 -- 父元素設置 display:table

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

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