在调整浏览器大小时，使列和主要内容保持在左侧或右侧

Question

我有一个浮动右列，在浏览器宽度减小时成功地推送主内容区域。 CSS：

div.bigSquare 
{
    min-width: 200px; 
    max-width: 400px;
    background-color:silver;
}

div.floatRight
{
    float:right;
    width:100px;
    height:200px;
    background-color: pink;
}   

HTML：

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right square</div>

<div class="bigSquare">The main content area has very very very very very 
very very very very very very very very very very very very very very 
very very very very very very very very very very very very very very very         
very very very very 
very very very many words in it.
</div>

（JSFiddle）

问题在于，当我充分缩小浏览器宽度时，主内容区域的文本溢出右侧列：

我想保持主要内容始终留在右栏中。最好的方法是什么？

Answer 1

将overflow: auto添加到div.bigSquare即可。

设置overflow属性会强制div创建块格式化上下文，这意味着内容不会与块外部的任何浮动元素进行交互。

参考：https://www.w3.org/TR/CSS2/visuren.html#block-formatting

div.bigSquare {
  min-width: 200px;
  max-width: 400px;
  background-color: silver;
  overflow: auto;
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
  The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
</div>

Answer 2

每当你float一个元素时，不要忘记它必须是clear，否则你会看到它后面的元素出现不可预测的行为。

您必须指定overflow属性，或clear float，并在此过程中创建一个新的block formatting context，让浏览器知道它可以停止浮动元素然后。

当我在overflow: auto上指定bigSquare时，请参阅下面的示例 - 请注意，在较小的屏幕上bigSquare将低于floatRight：

div.bigSquare {
  min-width: 200px;
  max-width: 400px;
  background-color: silver;
  overflow: auto;
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

<h2>Fun with positions, widths, and heights</h2>

<div class="floatRight">Right column</div>

<div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it.
</div>

<强>解决方案：

所以在你的情况下，这里是解决方案 - 浮动你的bigSquare和clear浮动floatRight后使用它：

<div style="clear: both"></div>

请注意，您必须为浮动容器指定width - 否则它将换行（一个在另一个之下） - 因此指定bigSquare的宽度以调整{{1} } 100px：

floatRight

以下片段：

  width: calc(100% - 100px);

div.bigSquare {
  max-width: 400px;
  background-color: silver;
  float: left;
  width: calc(100% - 100px);
}
div.floatRight {
  float: right;
  width: 100px;
  height: 200px;
  background-color: pink;
}

最简单的解决方案：

不要使用花车 - 使用<h2>Fun with positions, widths, and heights</h2> <div class="floatRight">Right column</div> <div class="bigSquare">The main content area has very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very many words in it. </div> <div style="clear: both"></div>：

flexbox

.flexbox {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse; /*wrap if window width less than combined min-widths*/
}
div.bigSquare {
  background-color: silver;
  flex: 1 0 200px;/*set min-width*/
}
div.floatRight {
  width: 100px;
  height: 200px;
  background-color: pink;
  flex: 1 0 100px;/*set min-width*/
}