清除浮动和闭合浮动的介绍-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于清除浮动和闭合浮动的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

为什么要清除浮动

子元素 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>

以上就是清除浮动和闭合浮动的介绍的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 清除浮动和闭合浮动的介绍

清除浮动和闭合浮动的介绍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论