没有表格的CSS对齐-如果未指定边距，为什么两个div重叠？_Css

没有表格的CSS对齐-如果未指定边距，为什么两个div重叠？

css

没有表格的CSS对齐-如果未指定边距，为什么两个div重叠？,css,Css,在以下示例中，来自：分区集装箱 { 宽度：100%；边际：0px；边框：1px纯色灰色；线高：150%； } div.header，div.footer { 填充：0.5em；颜色：白色；背景颜色：灰色；清除：左； } h1.1标题 { 填充：0；保证金：0； } 左分区 { 浮动：左；宽度：160px；保证金：0；填充：1em； } 部门内容 { 左边距：190px；左边框：1px纯色灰色；填充：1em； } W3Schools.com “永远不要在必要的范围之外

在以下示例中，来自：


分区集装箱
{
宽度：100%；
边际：0px；
边框：1px纯色灰色；
线高：150%；
}
div.header，div.footer
{
填充：0.5em；
颜色：白色；
背景颜色：灰色；
清除：左；
}
h1.1标题
{
填充：0；
保证金：0；
}
左分区
{
浮动：左；
宽度：160px；
保证金：0；
填充：1em；
}
部门内容
{
左边距：190px；
左边框：1px纯色灰色；
填充：1em；
}
W3Schools.com
“永远不要在必要的范围之外增加解释任何事情所需的实体数量。”奥克姆的威廉（1285-1349）
免费网页建设教程
在W3Schools，你会找到所有你需要的网页构建教程，
从基本的HTML和XHTML到高级的XML、XSL、多媒体和WAP
W3Schools-网络上最大的Web开发者网站
版权所有1999-2005由Refsnes Data提供。

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

非常感谢您在理解上的帮助。

浮动最初不是用于布局渲染的，它的主要目的是围绕图像（或其他元素）包装文本。这就是你看到的行为

浮动图元时，它们不再被视为“块”图元，其宽度将“收缩包裹”到可以容纳图元的最小尺寸。这就是为什么当您将多个元素相邻浮动时，继续的元素不会与前面的元素重叠。

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

<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>