快速回答

Question

带有“消息框”的div正在其父div“message-container”之外我不明白为什么？

我用过“overflow：auto;”在我的CSS“消息框”。但它还没有给我预期的结果。当我在“message-box”上使用“overflow：auto”时，左边距不能正常工作。

以下是我的HTML文件：

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css" >  
<title>temp</title>
</head>

<body>

<div id="main">

<div id="header">header</div>

<div id="container">
    <div id="user-container">user</div>

    <div id="message-container">
        <div id="message-box">message box</div>
        <div id="text-box"> text box</div>
    </div>
</div>

<div id="footer">footer</div>
</div>

</body>
</html>

以下是我的CSS文件：

#main{
    border: 1px solid red;
    margin: 5px;
}

#header{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#container{
    margin:10px;
    height:32em;
}
#footer{
    border: 1px solid red;
    height:30px;
    margin: 10px;
}

#user-container{
    border: 1px solid red;
    float:left;
    width:120px;
    height:32em;    
}
#message-container{
    border: 1px solid red;
    height:32em;
    width:100%;

}
#message-box{
    border: 1px solid grey;
    overflow:auto;
    margin:5px;
}
#text-box{
    border:1px solid grey;
    overflow:auto;
    margin:5px;
}

请某人帮助我。

Answer 1

快速回答

您的#message-box与#message-container div相关的边距正确，但问题是#message-container和#message-box都溢出到#user-container 。由于#message-box具有overflow属性，因此会将其剪切到溢出到#user-container的确切边缘。由于#message-container没有overflow，因此它会继续在#user-container后面流向#container div的边缘。要解决此问题，请将overflow添加到#message-container。

#message-container {
  height: 32em;
  border: 1px solid red;
  overflow: hidden;
}

我认为你想要的是overflow: hidden来剪辑溢出的内容; overflow: auto添加滚动条以查看溢出的内容。

解释

float上的#user-container导致问题。浮动从正常文档中删除元素＆＃39; flow＆＃39; （参见下面的正常文件流程）。

我将背景颜色添加到#user-container（绿色）和#message-container（蓝色），这样您就可以看到发生了什么。如果您从overflow和#text-box移除#message-box，则会在#message-box和#message-container之间看到边距实际上正常工作。将它们添加回去，您就会看到#user-container如何剪切它们。

这就是发生的事情 http://jsfiddle.net/fmceqbdp/2/

正常文件流程

DOM具有元素层次结构。该文档是最高级别的父级（或最外层的框），您添加的任何元素都是其子级。元素的起始位置是其父元素的上半部分。如果在同一级别添加另一个元素（不是嵌套），则它是文档的另一个子元素和第一个元素的兄弟元素。同胞也希望尽可能靠近文档的左上角定位，但它会被第一个元素（内联）或下一行（块）向右推。将元素嵌套在该元素中时，嵌套元素是子元素，它包含在父元素中。它的起始位置是其父元素的左上角。这是正常的文件流程。从正常流动中移除浮动元素，因此它不会像通常那样推动其他元素。

浮动如何表现

Div是块元素，它们会推动其他元素。但是，当您浮动元素时，它会从正常文档流中删除该元素 - 这意味着它的位置对于兄弟元素（同一级别的元素）是不可见的，因此它们现在位于浮动的前面或后面元素就好像浮动元素不存在一样。由于您浮动#user-container，#message-container会填充整个#container，就好像#user-container不存在一样。

溢出如何工作

具有overflow属性的元素将自动清除溢出到其他元素。这就是#message-container流入#user-container占用的空间的原因，但其子#message-box和#text-box溢出属性已经清除了自己流入空间#user-container 。他们的边距仍然相对于他们的父母#message-container，而不是他们被剪裁的地方，这就是为什么它们在#user-container遇到没有左边距的原因。

有关详细信息，请参阅 http://css-tricks.com/the-css-overflow-property/ - 向下滚动页面的1/4左右。

Answer 2

你需要在＃message-container中添加一个溢出，因为这是由float而不是它的子节点推送的div。＃message-box和#text-box不与父母以前的兄弟姐妹互动。

所以，删除所有溢出：auto;并这样做：

#message-container {
  height: 32em;
  border: 1px solid red;
  overflow: hidden;
}

这是一个小提琴： http://jsfiddle.net/Ljqmjzkp/1/

PS：清理代码以便更容易阅读，我也根据你的DOM缩进它，这样你就可以看到结构了。牢记这一点，它有助于^^

为什么我的div超出了它的父div？

2 个答案:

快速回答

解释

正常文件流程

浮动如何表现

溢出如何工作