Question

我想要的是一个自动调整其内容大小的左右列，然后是一个占据剩余空间的中心列。

我使用适合我的css和div来获得左，中，右列布局。但是我不明白为什么它有效。 .left和.right类是有意义的，并按计划工作。 .center类令人困惑。

我的两个问题：

为什么“overflow：hidden”导致中心div从左边div的右边缘开始？更具体地说，为什么左列区域计为朝向中心列的溢出空间。为什么右列区域不算作溢出空间？
为什么“margin：0 auto”会导致中心div的margin-right等于右div的大小？更重要的是，为什么不 margin-left与左div的行为相同？

如果我错过了一些明显的东西，请原谅。

工作代码示例：

<html>
<head>
    <style>
    body, div{ margin:0;padding:0; }
    h1, h2, p{ margin:0 1em; padding:0; color:darkorange;}
    #header{
        height:2em;
        line-height:2em;
        overflow:hidden;
    }
    .left{
        float:left;
        background:#555;
    }
    .right{
        float:right;
        background:#777;
    }
    .center{
        overflow:hidden;
        margin:0 auto;
        background:#666;
    }
    </style>
</head>
<body>
<div id="header">
    <div class="left"><h1>Chapter Title</h1></div>  
    <div class="right"><p>Page Number</p></div>
    <div class="center"><h2>Page Title</h2></div>
</div>
</body>
</html>

Answer 1

这实际上与溢出无关，因为左边和右边的div不是中心div的子节点。

overflow: hidden的作用是使元素建立新的block formatting context（BFC）。浮点数和非浮点数以不同的方式交互，具体取决于它们所参与的格式化上下文，这就是为什么在处理浮点数时经常使用此类触发器。在这种特定情况下，让中心div建立BFC可以防止浮动进入其内容区域。上面关于BFC的部分链接到后面的浮动部分，describes it in a little more detail：

表的边框，块级替换元素或正常流中建立新块格式化上下文的元素（例如“溢出”除“可见”之外的元素）不得重叠与元素本身在同一块格式化上下文中的任何浮点数的边距框。

如果中心div没有建立自己的BFC，那么它将被布置为好像浮动从未存在（毕竟，浮动一个元素将该元素从流中取出）。文本仍将与浮动一起流动，但中心div的内容区域将与页面本身一样宽，浮动内容位于其内容区域的顶部。请注意，当中心div确实建立BFC时，文本周围的水平边距才会明显生效。
您的中心div没有设置宽度，因此any auto margins are zeroed out并且元素尽可能宽。中心div与浮子齐平，因为浮子没有边距。它可以考虑到它们的确切宽度而与浮子齐平的原因可以通过上面给出的相同引用来回答。

如果所有这些对您来说似乎都不直观，那是因为overflow: hidden最初并不意味着具有建立新格式化上下文的效果。这种副作用被添加到CSS2.1以解决实施限制。有关说明，请参阅this answer。

Answer 2

好吧，一个边距不在你的元素内（无论它是什么元素），它都不在它之内。如果添加一个边框也不是你的边框。

所以基本上，左+中+右= 100％的屏幕，但是如果你为这些元素添加边距/边框，它们会超过屏幕大小的100％，所以它们必须重叠。

检查此（稍加修改）代码：

<html>
<head>
    <style>
    body, div{ margin:0;padding:0; }
    h1, h2, p{ margin:0 1em; padding:0; color:darkorange;}
    #header{
        height:2em;
        line-height:2em;
    }
    .left{
        float:left;
        background:#555;
        border: 2px solid #FF00FF;
    }
    .right{
        float:right;
        background:#777;
        border: 2px solid #FF0000;
    }
    .center{
        background:#666;
        border: 2px solid #FFFF00;
    }
    </style>
</head>
<body>
<div id="header">
    <div class="left"><h1>Chapter Title</h1></div>  
    <div class="right"><p>Page Number</p></div>
    <div class="center"><h2>Page Title</h1></div>
</div>
</body>
</html>

我把彩色边框。中央元素的边界在左边和左边。是的，因为它们首先出现在你的文件中。

溢出：隐藏什么都没做，因为我已经从我的代码中删除它并且它没有改变任何东西（没有理由它应该）。您可能同时进行了其他更改。

相同的保证金：0自动;，它实际上没有做任何事情。

CSS：左/右/中心示例，请解释为什么这样做

2 个答案: