省略一个clear:both

原来以为clear:both是法宝,到处乱用,这两天theme做多了(都到快吐了,纯粹是自虐),知道有时候要用clear:left或是clear:right而有时候多加一个padding:1px也能解决大问题,具体的解释请看Uncollapsing Margins。长见识哦。

如果在一个容器里的所有的元素都有float的属性,那么这个容器的高度就没有了,请参见Clearing floats的例子。以前我的做法是在容器的底部加上空的div并定义css为clear:both不过这显然是不符合有意义的html的做法,这是一个毫无意义只是为了布局而存在的div,需要被消灭!

于是又有聪明的发明了overflow: hidden; width: 100%;两句保证了容器能有自己的高度(其实第二句是为了ie量身定制滴,第一句如果不是为了ie可以写成overflow: auto;其实更恰当,但是如果用了auto的话ie就永远显示滚动条,算了,我还是妥协吧。)

出处:Clearing floats

5 Responses

  1. yixia says:

    我做了一个jquery+纯html的网页(其实是jsp)整个页面的结构变得相当的整齐漂亮!java+css+javascript+简单的html,看着就舒服明了。改样子夜随心所欲。所以觉得因为javascript的使用让html代码可以开始有语义,其实是为了让自己过得简单一些!

    • Charles says:

      这段话,我又没看懂啊,你的文章我倒是看懂一些了……

      • 轶侠 says:

        有空把我给单位写的程序拿来做jquery教程,你看了就知道了

  2. singrun says:

    好用就行,我觉得应该按照实用主义来做。
    严格遵守语义,有点自虐。
    或者说,语义也不一定符合实际需求。

  3. Charles says:

    完全没看懂