Question

我在清除左右浮动之间的溢出问题时遇到了问题。

我的溢出深入到第一个父div中，我只是希望它清除到下一个父div的下一行。这是我的代码的简化版本：

 <div>
      <div style='float:left; display:block;'>
        <div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:red; clear:right'>
            <div style='width:300px; position:relative; display: block; clear: both'>
              asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
            </div>
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
        </div>
      </div>
      <div style='float;right;'>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
      </div>
    
    </div>

上面的例子中的文字与红框在同一行重叠。如何将重叠浮动右侧文本下拉到下一个蓝框？

Answer 1

轻松回答您的问题：

红色框内的文字将始终位于红色框中，因为它是其容器。所以......

你设置了一个限制，内容大于容器。这称为溢出。

您可以使红色框增长，或使用CSS溢出属性处理溢出：w3schools.com/cssref/pr_pos_overflow.asp

如果你想保持你的div的宽度限制，你可以添加一个空白的div来匹配溢出的第一个col div：

<div>
      <div style='float:left; display:block;'>
        <div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:red; clear:right'>
            <div style='width:300px; clear: both'>
              asdfasdfasdfasdffadsafasdfasdfasdfasdfasdfasdfasdfasdfasdf
            </div>
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
          <div style='background-color:blue'>
            asdfasdfasdfasdfasdfasdf
          </div>
        </div>
      </div>
      <div style='float;right;'>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
          asdfasdfasdf
        </div>
        <div>
        <br>
        </div>
        <div>
          asdfasdfasdf
        </div>
      </div>
    
    </div>

如何只清除一行溢出？

1 个答案: