Question

我一直认为更改元素样式的overflow属性只会决定如何处理元素边界之外的内容，而不是决定孩子是在内部还是外部。< / p>

我有这段代码：

＆＃13;

#container {
  border: 2px solid red;
  overflow: hidden;
}
#container .left {
  width: 50%;
  float: left;
}
#container .right {
  width: 50%;
  float: right;
}

＆＃13;

<div id="container">
  <h1>container text</h1>
  <div class="left">
    <h2>left text</h2>
  </div>
  <div class="right">
    <h2>right text</h2>
  </div>
</div>

＆＃13;

当我将overflow从hidden更改为visible时，.left和.right子元素似乎位于其父框之外当overflow属性设置为hidden时。为什么overflow属性以这种方式运行？

Answer 1

因为您使用的是float，因此您需要清除float

有关clearing floats和float

的更多信息

使用（overflow:visible）的代码段：

＆＃13;

.cf:before,
.cf:after {
    content: " ";
    display: table; 
}

.cf:after {
    clear: both;
}

#container {
  border: 2px solid red;
  overflow: visible;
}
#container .left {
  width: 50%;
  float: left;
}
#container .right {
  width: 50%;
  float: right;
}

＆＃13;

<div id="container" class="cf">
  <h1>container text</h1>
  <div class="left">
    <h2>left text</h2>
  </div>
  <div class="right">
    <h2>right text</h2>
</div>
</div>

＆＃13;

在此片段中，我使用了micro clearfix

CSS3对溢出属性

1 个答案: