了解容器如何在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应该包含/包含任何相对或静态定位的非浮动元素，但是你可以在内联元素上使用填充，或者使用负边距/负值位置相对。这允许我认为更灵活的布局。

2. 浮动不应该被包含，因为它们不在流动中，除非你之后有元素清除，或溢出设置为除可见之外的任何东西。在IE7 / IE6中你只需要触发hasLayout，这可以通过众多属性/值组合来完成（这违反了规范）。请参阅http://work.arounds.org/clearing-floats/了解内部浮子的方法。

以下是我从其他问题编译的跨浏览器错误的网站列表：

• 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属性强制它在浮动元素下面。
因此，包含框将展开以包含清除元素，并且巧合地也将包含浮动。

有关详细信息，请参阅spec：

  

由于浮动不在流动中，   创建了未定位的块框   在浮箱流动之前和之后   垂直，好像浮子没有   存在。

Answer 3

• Eric Meyer的 CSS: The Definitive Guide 是一个很好的参考。这是旧的，但盒子模型没有改变。
• quirksmode对浏览器特定的行为有很好的解释。
• 例如＃2，您可以在第二个黑色块之后添加<div style="clear: both;"></div>，也可以在容器<div>
之后添加高度和宽度

Answer 4

关于你的第一个问题，这是我最喜欢的方法，用于在没有空元素的容器中清除浮动：http://www.quirksmode.org/css/clearing.html

Answer 5

我发现Chris Coyier的文章编写得很好且易于理解。他有一个关于核心概念的部分，包括Floats和Box Model

等主题

希望这有帮助， JD