【转贴】没有div没有float没有clear没有hack的超强CSS布局

【转贴】没有div没有float没有clear没有hack的超强CSS布局

---

 

原贴地址：http://parandroid.com/no-float-css-layout/

---

 

CSS + XHTML 有多伟大不必多说了。但这项看似简单的开发技术，有千种应用万般变化。学会CSS + XHTML 不难，如何最合适最精简的去应用才是最难的。我基本每隔一段时间会对帕兰映像修改一下，很多时候，外观没有任何改变。只是为了自己又用更简单的代码实现的某个小部分的修改而沾沾自喜。

我们说CSS + XHTML，但很多时候，我们理解为DIV + XHTML。在网络上，你可以看到很多这种错误理解的实例，一些网页设计中，堆砌着大量的冗余DIV，进而需要再生成冗余的CSS样式定义属性float, clear等，再进而要对不同浏览器进行Hack。很多设计师以自己精通Hack 为荣，但直接使用不需要Hack 的方法岂不是更道高一丈。

我个人不常用流行的圆角设计，除了因为美术功底不好，另外一部分原因就是它需要大量无实际意义的XHTML标签。

聊天完毕。介绍一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack， 没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示 或阅读该布局设计师的文章说明。下面是截图。

看看它的兼容性：

• Windows
  • IE 5.01
  • IE 5.5
  • IE 6
  • IE 7
  • IE 8 Beta 1
  • Firefox 0.8
  • Firefox 1.5
  • Firefox 2.0
  • Opera 9.0
  • Opera 9.24
• Mac
  • IE 5.2 *
  • Safari 2.0
  • Safari 3.0
  • Firefox 2.0
  • Mozilla 1.7.3
  • Camino 0.8.2
• Linux
  • Konqueror
  • Mozilla
• iPhone

我并不是鼓励你马上去把自己网页中的DIV 代码全去掉，更不鼓励为了精简而精简。事实上，这个超强的CSS 布局的真正实用性也有待进一步使用才知道，因为它呈现的不过是一个“Minimization design/最低限度设计”的网页原型，。

但只要你是一个网页设计爱好者，这绝对是一个你值得研究和学习的布局。所以，特此分享:)