为什么要清除浮动

 

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





本文转载自中文网