CSS溢出：隐藏错误

我依靠CSS属性overflow:hidden含有3嵌套&浮动div秒。 overflow:hidden适用于此html的父代div。CSS溢出：隐藏错误

当我不使用overflow:hidden我最后div是出位线浮动div S的范围内，但是当我使用overflow:hidden整个div结构向下移动。

希望有人能明白我的意思是上面的文字，但情况不是我提供的CSS代码了。

CSS：

#header { 
    display: block; 
    width: 590px; 
    height: 50px; 
    background: #336699; 
    margin: 0 auto; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

    overflow: hidden; 
} 

.header-left-wrapper { 
    float: left; 
    width: 150px; height: 50px; 
    background: #ff0000; 
} 
.header-input-wrapper { 
    float: left; 
    width: 300px; height: 50px; 
    background: #00ff00; 
} 
.header-right-wrapper { 
    float: right; 
    width: 140px; height: 50px; 
    background: #ff0000; 
    overflow: hidden; 
}

为了澄清，由于某种原因，当我申请overflow:hidden到.header-right-wrapper，整个头，如果我只是应用了margin或position下移。任何帮助？提前致谢。

来源

2013-02-15 JaPerk14

的jsfiddle它，请 – shnisaka 2013-02-15 03:34:26

这将帮助，如果你给我们说HTML – 2013-02-15 03:34:44

这里是fiddle.net（HTTP：// JS fiddle.net/ZETus/） – JaPerk14 2013-02-15 03:41:51

.header - 右 - 包装在下降，因为作为一个浮动元素，它需要清除页面上的其他东西（.close）。当你给#header {overflow：hidden}时，它被迫包含它的子元素，至少达到它的{height}，包括那个浮动的div。因此它向下移动。问题不在于与#header相关的标记，而是整个Lightbox布局。这里有一个修复：

.close {margin-bottom: -100px;}

http://jsfiddle.net/ZETus/4/

另一种方法是使用绝对定位采取.close跳出流程，使浮子不必清除：

http://jsfiddle.net/ZETus/5/

.close { 
    position: absolute; 
    right: -10px; 
    top: -10px; 
}

来源

2013-02-15 04:09:33 isherwood

太棒了！有效。但你能解释它为什么起作用吗（我对布局不太好）。对我而言，似乎将margin-bottom添加到.close会使#header更进一步。 – JaPerk14 2013-02-15 04:13:18

请注意，这是一个负边距，它允许下面的元素侵入其空间。请记住标记您接受的答案。 – isherwood 2013-02-15 04:17:46

答案更新了另一个选项。 – isherwood 2013-02-15 04:21:04

CSS溢出：隐藏错误

回答

相关问题