Question

使用下面的HTML和样式创建的布局在溢出后变得一团糟：第一个容器<div>的隐藏被删除（因此MathJax表达式没有被剪裁）。我无法找到一个简单的解决方案，我将不胜感激任何帮助。

HTML ：

<div class="c0">
  <div class="d01">
   This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence.
  </div>
  <div class="d02">
   This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence. This is a repeated sentence.
  </div>
</div>
<div class="c1">
  <div class="d02">
   Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here.
  </div>
  <div class="d02">
    Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here.
  </div>
  <div class="d01">
   Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here. Some paragraph filler here.
  </div>
</div>

风格：

.c0 { background-color:#FF00FF; width:500px; margin: 0 auto;
 position: relative; overflow:hidden; }

.d01 { background-color:#00FFFF; width:250px; float:right; margin-top: 3em; }

.d02 { background-color:#006666; width:150px; float:left; margin-top: 1em; }

.c1 { background-color:#666666; width:600px; margin: 0 auto; overflow:hidden; }

Answer 1

如果你不想保留overflow:hidden;属性，触发布局要计算，包括浮动元素，你可以使用另一个值：overflow:auto;或使用其他技术。

overflow:auto/*hidden*/;，display:inline-block/*inline-table/table/table-cell*/;，float:left/*right*/;会触发布局。

否则，您可以使用inline添加显示不 clear:both/*right/left*/;的最后一个额外元素或伪元素，它是一种共同称为clearfix的方法。

这里有一些解释：http://css-tricks.com/all-about-floats/

Answer 2

使用clear:both;，它将被修复

删除溢出：隐藏更改布局

2 个答案: