html - 如何清除一行的溢出？

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>