了解容器如何在css中工作

1. 通常,div应该在内部包含/包含任何相对或静态定位的、非浮动的元素,但您可以在内联元素上使用padding,或者使用负边距/负值(位置相对)。这允许我假设更灵活的布局。

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/ (乔纳森·尼尔的默认IE风格综述)

• http://work.arounds.org/ (这是我正在开发的超级档案网站)

浮动元件被从正常流量中取出,因此不被视为占据任何高度。
为了解决这个问题,可以在float后面添加一个空元素 clear:both 是的。清除元素是流中的常规元素,并且 clear 属性将其强制位于浮动元素之下。
因此,包含框将展开以包含clearing元素,同时也将包含float。

有关详细信息,请参见 spec 以下内容:

因为浮子不在流动中, 创建的非定位块框 浮箱流量前后 垂直的,好像浮子没有 存在。

• 埃里克·迈耶的 CSS: The Definitive Guide 是一个很好的参考。它很旧,但盒子的型号没有变。
• quirksmode 对浏览器特定行为有很好的解释。
• 例如2,您可以添加 <div style="clear: both;"></div> 在第二个黑色块或和容器的高度和宽度之后 <div>

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

我发现克里斯·科伊尔的文章写得很好,也很容易理解。他有一个关于核心概念的章节,包括 Floats 以及 Box Model

希望能帮上忙, JD公司