最简单的方法是在父div上加上overflow:hidden，不要指定高度：
#parent { overflow: hidden }
另一种方法是同时浮动父级div：
#parent { float: left; width: 100% }
另一种方法是使用一个清除元素：
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>
CSS
span.clear { clear: left; display: block; }
问题在于浮动元素是脱离文档流的：
如果一个元素浮动、绝对定位或者是根元素，那么它就被称为脱离文档流。
因此，它们不像行内元素那样影响周围的元素。
这在9.5 浮动中有解释：
由于浮动元素不在文档流中，所以在浮动框之前和之后创建的非定位块级盒子会垂直地流动，就好像浮动元素不存在一样。但是，与浮动元素相邻的当前和随后的行级盒子会缩短，以便为浮动元素的边距盒留出空间。
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>只有正常流中的子元素会被考虑进去（即浮动框和绝对定位框将被忽略[...]
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: both属性的空元素。
<div style="clear: both"></div>
然而，这不是语义化的。因此最好在父元素末尾生成一个伪元素：
.clearfix::after {
clear: both;
display: block;
}
:after来支持旧版浏览器，或使用其他块级显示方式，如display: table。如果该元素具有任何浮动后代，其底部边缘低于元素的底部内容边缘，则将增加高度以包括这些边缘。
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>表格的边框盒子、块级替换元素或在正常流中建立新块格式化上下文的元素[...]不得与同一块格式化上下文中任何浮动元素的外边距框重叠。
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>Block boxes with overflow other than visible, e.g. hidden
.bfc-root {
overflow: hidden;
/* display: block; */
}
Block containers that are not block boxes: when display is set to inline-block, table-cell or table-caption.
.bfc-root {
display: inline-block;
}
Floating elements: when float is set to left or right.
.bfc-root {
float: left;
}
Absolutely positioned elements: when position is set to absolute or fixed.
.bfc-root {
position: absolute;
}
创建了
flow和flow-root内部显示类型，以更好地表示流动布局显示类型并创建一个显式开关，使元素成为BFC根。 （这应该消除了像::after {clear:both;}和overflow:hidden之类的hack的需求[...]
不幸的是，目前还没有浏览器支持。最终我们可能能够使用。
.bfc-root {
display: flow-root;
}
这里是更现代的方法：
.parent {display: flow-root;}
不再需要clearfix。
p.s. 使用overflow: hidden;会隐藏box-shadow，因此请注意...
将您的浮动
overflow:hidden;，这样它就可以正常工作了。W3Schools建议：
在父元素上使用overflow: auto，这将“着色”整个背景，包括元素的边距。同时浮动元素将保留在边框内。
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix
谢谢LSerni，你为我解决了这个问题。
要实现这个：
+-----------------------------------------+
| +-------+ +-------+ |
| | 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>
在某些情况下，即如果你只是使用float来使元素在同一“行”上流动时，你可能会使用
display: inline-block;
取代
float: left;
没有什么遗漏。float是为了让你在文本段落旁边放置一张图片等元素，使得文字会围绕在图片周围，如果文字“拉伸”了容器的话，这种情况就无法发生了。第一个段落结束后，下一个段落才会在图片下方开始（可能会有几百个像素的空隙）。
这就是你得到当前结果的原因。
正如Lucas所说，你所描述的是浮动属性的预期行为。许多人感到困惑的是，为了弥补CSS布局模型的缺陷，float已经被推得远远超出了其最初的预期用途。
如果您想更好地了解此属性的工作原理，请查看Floatutorial。
<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>
overflow:hidden会尽最大努力强制浏览器包含父元素的子元素。这就是为什么它可以修复问题。 - Doug Neineroverflow: hidden的解释在这里：链接。非常感谢，它对我有用。 - Vikas Aroraoverflow: hidden只会隐藏流出父容器的元素部分。对我来说，这导致某些文本变得无法阅读。 - Top Cat