清除浮動和閉合浮動的介紹

這篇文章帶給大家的內容是關於清除浮動和閉合浮動的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

為什麼要清除浮動

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

• 父親元素靠子元素撐起來

• 清除浮動 clear:both

<h1>清除浮动</h1>
<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>

以上是清除浮動和閉合浮動的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！