在某些情况下，即当(如果)你只是使用float让元素在同一“行”上流动时，你可能会使用

display: inline-block;

而不是

float: left;

否则，在最后使用一个清晰的元素就可以了，即使它可能违背了需要一个元素来做应该是CSS的工作。

把你的浮动div(s)在一个div和CSS给它overflow:hidden; 它会工作得很好。

这里的其他解对我不起作用——我的元素一直被切断。但是如果其他人使用bootstrap来这里，它对我来说是有效的，我显式地将中介行div的x轴边距设置为零，并设置了justify-content-between:

<div class='container p-2'>
  <div class='row mx-0 justify-content-between'>
    <div class='float-left'></div>
    <div class='float-right'></div>
  </div>
</div>

正如Lucas所说，您所描述的是float属性的预期行为。让很多人感到困惑的是，为了弥补CSS布局模型中的缺点，float已经远远超出了它最初的预期用途。

如果你想更好地理解这个属性是如何工作的，可以看看Floatutorial。

原因

问题是浮动元素处于流外:

如果元素是浮动的，那么它就会被调用出流 定位，或者是根元素。

因此，它们不会像流中元素那样影响周围的元素。

这在9.5 Floats中有解释:

由于浮动不在流中，因此创建了非定位块盒 浮子盒前后垂直流动，好像没有浮子一样 存在。但是，在旁边创建的当前和后续行框 浮盘根据需要被缩短，以便为边距箱腾出空间 花车的。

html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-sibling { border: 3px solid green; } .block-sibling:after { content: 'Block sibling'; color: green; } .float { float: left; border: 3px solid red; height: 90px; width: 150px; z-index: 1; } .float:after { content: 'Float'; color: red; } <div class="float"></div> <div class="block-sibling"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. </div>

这在10.6计算高度和边距中也有说明。对于“正常”块，

只有正常流中的子流被考虑在内(即， 浮动框和绝对定位框被忽略[…])

html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-parent { border: 3px solid blue; } .block-parent:after { content: 'Block parent'; color: blue; } .float { float: left; border: 3px solid red; height: 130px; width: 150px; } .float:after { content: 'Float'; color: red; } <div class="block-parent"> <div class="float"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. </div>

简单的解决方案:清场

解决这个问题的一种方法是强制将一些流内元素放置在所有浮动的下面。然后，父元素的高度会增长以包装该元素(因此浮动也会增加)。

这可以使用clear属性来实现:

此属性指示元素框的哪些边不能使用 与先前的浮动框相邻。

html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-parent { border: 3px solid blue; } .block-parent:after { content: 'Block parent'; color: blue; } .float { float: left; border: 3px solid red; height: 84px; width: 150px; } .float:after { content: 'Float'; color: red; } .clear { clear: both; text-align: center; height: 37px; border: 3px dashed pink; } .clear:after { position: static; content: 'Block sibling with clearance'; color: pink; } <div class="block-parent"> <div class="float"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra. <div class="clear"></div> </div>

因此，一种解决方案是添加一个空元素和clear:两者都作为float的最后一个兄弟元素

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

然而，这不是语义上的。所以最好在父元素的末尾生成一个伪元素:

.clearfix::after {
  clear: both;
  display: block;
}

这种方法有多种变体，例如使用已弃用的单冒号语法:after来支持旧的浏览器，或使用其他块级显示，如display: table。

解决方案:BFC根

对于开头定义的有问题的行为有一个例外:如果块元素建立了块格式化上下文(是BFC根)，那么它也将包装它的浮动内容。

根据10.6.7块格式化上下文根的“Auto”高度，

如果元素有任何浮动子代，其底边距为 是在元素的底部内容边下面，那么高度是 增加到包括这些边。

html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-parent { border: 3px solid blue; } .block-parent.bfc-root:after { content: 'BFC parent'; color: blue; } .float { float: left; border: 3px solid red; height: 127px; width: 150px; } .float:after { content: 'Float'; color: red; } .bfc-root { overflow: hidden; } <div class="block-parent bfc-root"> <div class="float"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. </div>

此外，正如9.5 Floats所解释的，BFC根也很有用，因为以下原因:

表的边框框、块级已替换元素或 元素，它建立一个新的块格式 上下文[…]不能与同一个浮动的页边距框重叠 块格式化上下文作为元素本身。

html { width: 550px; border: 1px solid; } body { font-family: sans-serif; color: rgba(0,0,0,.15); } body:after { content: ''; display: block; clear: both; } div { position: relative; } div:after { font-size: 200%; position: absolute; left: 0; right: 0; top: 0; text-align: center; } .block-sibling { border: 3px solid green; } .block-sibling.bfc-root:after { content: 'BFC sibling'; color: green; } .float { float: left; border: 3px solid red; height: 90px; width: 150px; z-index: 1; } .float:after { content: 'Float'; color: red; } .bfc-root { overflow: hidden; } <div class="float"></div> <div class="block-sibling bfc-root"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. </div>

块格式化上下文由

阻止溢出的盒子，但不可见，例如隐藏 .bfc-root { 溢出:隐藏; /*显示:block;* / ｝ 不是块盒的块容器:当display设置为inline-block, table-cell或table-标题时。 .bfc-root { 显示:inline-block; ｝ 浮动元素:当float被设置为左或右时。 .bfc-root { 浮:左; ｝ 绝对定位元素:当位置设置为绝对或固定时。 .bfc-root { 位置:绝对的; ｝

请注意，这些可能会产生不必要的附带效果，如剪切溢出内容，使用收缩匹配算法计算自动宽度，或成为流外。因此，问题是不可能有一个流内块级元素具有可见的溢出来建立BFC。

显示L3解决了这些问题:

创建流和流根内部显示 类型，以更好地表达流布局显示类型和 创建一个显式开关，使元素成为BFC根。 (这应该消除了像::after {clear: both;}和overflow: hidden[…])

遗憾的是，目前还没有浏览器支持。最终我们可能会使用

.bfc-root {
  display: flow-root;
}

谢谢你，塞尔尼，你帮我解决了。

要做到这一点:

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text2 | |
| +-------+                     +-------+ |
+-----------------------------------------+

你必须这样做:

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>