Question

我依靠CSS属性overflow:hidden来包含3个嵌套＆amp;浮动div s。 overflow:hidden已应用于此html的父div。

当我不使用overflow:hidden时，我的上一个div在浮动的div行中不合适，但当我使用overflow:hidden整个div时{1}}结构向下移动。

希望有人能够理解我上面的文字是什么意思，但是如果不是我也会提供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一样。有帮助吗？提前谢谢。

Answer 1

.header-right-wrapper正在丢弃，因为作为一个浮动元素，它需要清除页面上的其他内容（.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;
}

CSS溢出：隐藏的bug

1 个答案: