in coding

双浮动web布局

很久没写html了,最近写个东西,需要一个经典的双浮动布局。以前的经典做法是在末尾提供一个元素,并附加clear:both样式,这个附加的东东很显然是没有语义的,纯粹为了外观而添加,一个bad smell。想来web前端发展迅猛,应该有更优雅的解决方案,于是在twitter上提个问,得到2位专业前端童鞋的回答,记之。

linnchord: @b3inside 请教下,现在web布局div左右双浮动,下面还是要插一个div做clear:both吗? 有没啥更优雅的办法?

b3inside: @linnchord 在需要清浮动的div样式里加:after。.yn-fix-float:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;} 使用时div里引用这个class

b3inside: @linnchord <div id=”main” class=”yn-fix-float”>,最好样式里加个.yn-fix-float{zoom:1;}

terranc: @linnchord 父元素如果没有高度的话,加overflow:hidden;zoom:1;可以了

Write a Comment

Comment