0

在下面的示例中： http ://www.w3schools.com/css/tryit.asp?filename=trycss_float6

<head>
<style>
div.container
{
    width:100%;
    margin:0px;
    border:1px solid gray;
    line-height:150%;
}
div.header,div.footer
{
    padding:0.5em;
    color:white;
    background-color:gray;
    clear:left;
}
h1.header
{
    padding:0;
    margin:0;
}
div.left
{
    float:left;
    width:160px;
    margin:0;
    padding:1em;
}
div.content
{
    margin-left:190px;
    border-left:1px solid gray;
    padding:1em;
}
</style>
</head>
<body>

<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
 from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

如果我从 div.content 中删除边距，则 div.content 的边框与容器的边框重叠。这意味着 div.content 与 div.left 重叠 - 尽管 div.content 中的文本遵循 div.left 的文本。那么问题是为什么会有这样的行为？文本不重叠，但边距重叠。如果我们提到几个 div 的浮动，那么它们会相互跟随，而不必提及与页面的最左边缘相距多少边距。如何区分这两种情况？

非常感谢您对理解的帮助。

4

2 回答 2

0

浮动最初并不打算用于布局渲染 - 它的主要目的是将文本包裹在图像（或其他元素）周围。这是您看到的行为。

当您浮动元素时，它们不再被视为“块”元素，并且它们的宽度“收缩包装”到可能包含元素的最小尺寸。这就是为什么当您将多个元素彼此相邻浮动时，前面的元素不会与前面的元素重叠。

于 2013-03-25T19:56:02.267 回答
0

当您从 content-div 中删除边距时，容器和 content-div 的边距不会合并，而是 left-div 的宽度（不可见）充当 content-div 的边距。但是，当 content-div 的数据增加到超过指定给 left-div 的高度时，它会溢出并从 left-div 获取边距。

于 2013-03-25T20:08:55.853 回答