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

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

为什么要清除浮动

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

以上就是清除浮动和闭合浮动的介绍的详细内容，更多内容请关注技术你好其它相关文章！