前段时间做一个电商外包,分类货架、商品列表、设计师作品陈列……
一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动
<style>
.clear { clear: left|right|both|none; }
</style>
<!-- Float elements -->
<div class="clear"></div>
OK,解决了,页面列表瞬间丰满了起来……不过,浮动一多了代码里满是看上去毫无意义的<div>,影响代码可读性不说,这简直是要了处女座强迫症的老命啊!那么问题来了,闭合浮动哪家强?在一番搜索后,将常用方法整理如下:
利用HTML标签自身属性:
<!-- Float elements -->
<br clear="all"/>
才晓得还有这么个属性,涨姿势了,不过……虽然代码量少了点,这跟前述逼死强迫症的行为也并没有本质性的区别。
俗话说得好,子不教,父之过,儿子不听话那就只好从老子身上下刀了。
<style>
.list-float { overflow: hidden; }
</style>
<div class="list-float">
<!-- Float elements -->
<div>
Perfect. 看上去如此美好,那么这就是终极解决之道了?等等……我给父元素设置了overflow: hidden
,子元素要是溢出咋整?自动换行咋整?还是另谋高就吧。
伪元素能做许多神奇的事情,这次也不例外:
<style>
.clear-ele:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
</style>
<div class="clear-ele"><!-- Float element -->
<div>
最终只剩下一个类,并且可以直接绑定到浮动元素上,如果做好代码复用的话,就真正达到了结构与表现分离的漂亮代码。仔细看这里面的属性都是啥意思呢?
:after
在该浮动元素后生成了一个元素,内容为.
display: block
让该元素变为块级元素,拥有了撑开父元素的能力height: 0
与visibility: hidden
隐藏掉该元素,并让其不对父元素原有高度造成影响clear: both
清除浮动最近的项目都用上了这种方法来清除浮动,代码也清爽了很多。也许还有更好更简洁的方法,待以后慢慢发掘。