了解容器如何在css中工作

Question

我是一名程序员,试图在网页设计中进行修补,并且通常认为css非常符合逻辑.到目前为止,只有'拳击模特'仍然是一个神奇的土地,充满了牛头怪和竖琴.我将举例说明:

• http://jsfiddle.net/qyMxv/
  指定填充的div的内部元素超出div空间.是不是div应该包含其中的一切？这样做有什么意义呢？

• http://jsfiddle.net/wk9Kg/
  父母div完全消失,而孩子们正常显示.更奇怪的是,这种行为是由触发的float:left;.

是否有任何教程/参考书可以帮助我在这些怪癖中看到逻辑？我相信w3schools已经有一段时间了但是他们在这个问题上非常简短.在网上找到好的内容也变得很困难.现在我只是拨弄display,position和float属性,直到它的作品.

谢谢!

Answer 1

1. 一般来说,DIV应该附上/里面含有任何相对或staticly定位,非浮动元素,但你可以逃脱填充内联元素作为你拥有了它,或者用相对位置切缘阴性/负值.这允许我想要更灵活的布局.

2. 花车是不应该被包含,因为它们是流出来的,除非你有一个元素事后清算,或溢出设置为可见的任何其他.在IE7/IE6你只需要触发hasLayout的可以通过众多的属性/值连击来完成(这违背了规范).见http://work.arounds.org/clearing-floats/办法,以明确的浮动(S)内.

这是我从另一个问题编译的跨浏览器错误的站点列表:

• http://www.brunildo.org/test/

• http://www.gtalbot.org/BrowserBugsSection/

• http://www.quirksmode.org/

• http://www.quirksmode.org/bugreports/

• http://www.positioniseverything.net/

• http://reference.sitepoint.com/css

• http://www.richinstyle.com/bugs/

• http://haslayout.net/

• http://css-discuss.incutio.com/wiki/Main_Page

• http://channel9.msdn.com/wiki/wiki/InternetExplorerSupportForCSS/

• http://samples.msdn.microsoft.com/ietestcenter/

• http://channel9.msdn.com/wiki/wiki/InternetExplorerBugs/

• http://css-class.com/test/bugs/ie/ie-bugs.htm

• http://perfectionkills.com/category/cft/

• http://api.jquery.com/jQuery.support/

• http://www.css-lab.com/

• http://www.iecss.com/(Jonathan Neal对默认IE样式的综述)

• http://work.arounds.org/(这是我正在研究的实际超级档案网站)

Answer 2

浮动元素从正常流中取出，因此不计为占据任何高度。
要解决这个问题，您可以在浮动后添加一个空元素clear:both。清除元素是流中的常规元素，该clear属性迫使其位于浮动元素下方。
因此，包含框将展开以包含清除元素，并且同时也包含浮动元素。

有关更多信息，请参阅规范：

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。