本篇文章给大家带来的内容是关于清除浮动和闭合浮动的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
为什么要清除浮动
子元素 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>
以上就是清除浮动和闭合浮动的介绍的详细内容。