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

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

　　为什么要清除浮动

　　子元素float:left;脱离文档流,会造成父元素塌陷(撑不起来)

　　父元素靠子元素撑起来

　　清除浮动clear:both

　　<h1>清除浮动</h1>

　　<divclass="border-divclear">

　　<divclass="div1">

　　</div>

　　<divclass="div2">

　　</div>

　　</div>

　　//伪元素:after

　　.clear:after{

　　clear:both;

　　content:".";

　　display:table;

　　width:0;

　　height:0;

　　visibility:hidden;

　　}

　　闭合浮动-增加额外元素clear:both

　　父级元素不设置height

　　子元素float:left

　　额外增加元素clear:both

　　<divclass="main">

　　<divclass="sub"></div>

　　<divclass="sub"></div>

　　<divstyle="clear:both"></div>

　　</div>

　　闭合浮动--使用br和其自身的html属性

　　==注意==clear=all不推荐使用的属性(moz)

　　<divclass="main">

　　<divclass="sub"></div>

　　<divclass="sub"></div>

　　<brclear="all">

　　</div>

　　闭合浮动--父元素设置overflow:hidden

　　<divclass="main">

　　<divclass="sub"></div>

　　<divclass="sub"></div>

　　</div>

　　闭合浮动--父元素设置display:table

　　<divclass="main">

　　<divclass="sub"></div>

　　<divclass="sub"></div>

　　</div>