这是因为div的浮动。添加overflow:隐藏在外部元素。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

被浮动的元素不会增加到容器元素的高度，因此如果你不清除它们，容器的高度将不会增加…

我来直观地展示一下:

更多的解释:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

你也可以添加overflow: hidden;在容器元素上，但我建议你使用clear: both;代替。

另外，如果你想自清除一个元素，你可以使用

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

---

CSS如何浮动工作?

float到底是什么，它有什么作用?

The float property is misunderstood by most beginners. Well, what exactly does float do? Initially, the float property was introduced to flow text around images, which are floated left or right. Here's another explanation by @Madara Uchicha. So, is it wrong to use the float property for placing boxes side by side? The answer is no; there is no problem if you use the float property in order to set boxes side by side. Floating an inline or block level element will make the element behave like an inline-block element.Demo If you float an element left or right, the width of the element will be limited to the content it holds, unless width is defined explicitly ... You cannot float an element center. This is the biggest issue I've always seen with beginners, using float: center;, which is not a valid value for the float property. float is generally used to float/move content to the very left or to the very right. There are only four valid values for float property i.e left, right, none (default) and inherit. Parent element collapses, when it contains floated child elements, in order to prevent this, we use clear: both; property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer here. (Important) Think of it where we have a stack of various elements. When we use float: left; or float: right; the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. (Please don't relate this to z-index as that is completely different.)

---

以一个案例为例来解释CSS浮动是如何工作的，假设我们需要一个简单的2列布局，有页眉、页脚和2列，那么蓝图看起来是这样的…

在上面的例子中，我们将只浮动红色的方框，或者你可以浮动到左边，或者你可以浮动到左边，另一个也可以浮动到右边，这取决于布局，如果它是3列，你可以浮动到左边2列，另一个在右边，这取决于，尽管在这个例子中，我们有一个简化的2列布局，所以将浮动一个向左，另一个向右。

下面解释了创建布局的标记和样式…

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

让我们一步一步地布局，看看浮动是如何工作的。

首先，我们使用main wrapper元素，你可以假设它是你的viewport，然后我们使用header并分配一个高度为50px，所以没有什么特别的。它只是一个普通的非浮动块级元素，它将占用100%的水平空间，除非它是浮动的，或者我们为它分配inline-block。

float的第一个有效值是left，所以在我们的例子中，我们使用float: left;对于.floated_left，我们打算将一个块浮动到容器元素的左侧。

列向左浮动

父元素。wrapper被折叠了，绿色边框的那个没有展开，但它应该展开?稍后我们还会讲到这个，现在，我们有一列浮动到左边。

来到第二列，让它向右移动

另一列飘向右边

这里，我们有一个300px宽的列，我们将它浮动到右边，当它浮动到左边时，它将位于第一列的旁边，因为它浮动到左边，所以它在右边创建了一个空的沟槽，因为右边有足够的空间，所以右边浮动的元素恰好位于左边元素的旁边。

父元素仍然是折叠的，让我们现在修复它。有许多方法可以防止父元素崩溃。

添加一个空的块级元素并使用clear: both;在父元素结束之前，它包含浮动元素，现在这个是一个廉价的解决方案来清除你的浮动元素，它会为你做的工作，但是，我不建议使用这个。

<div style="clear: both;"></div>在.wrapper div结束之前，就像

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

这修复得很好，不再有崩溃的父类了，但它给DOM添加了不必要的标记，所以有人建议，使用overflow: hidden;在父元素上，包含按预期工作的浮动子元素。

使用溢出:隐藏;在.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

Demo

每次我们需要清除float时，这为我们节省了一个元素，但当我用它测试各种情况时，它在一个特定的情况下失败了，即在子元素上使用box-shadow。

演示(4面都看不到阴影，溢出:隐藏;导致此问题)

那现在怎么办?保存一个元素，没有溢出:隐藏;所以去一个明确的修复黑客，在你的CSS中使用下面的代码片段，就像你使用overflow: hidden;对于父元素，在父元素上调用下面的类使其自清除。

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

Demo

在这里，阴影按预期工作，同时，它自我清除防止崩溃的父元素。

最后，在清除浮动元素后使用页脚。

Demo

---

当为float时:none;无论如何使用，因为它是默认值，所以任何用途都声明float: none;?

好吧，这取决于，如果你正在进行响应式设计，当你想要浮动元素在某个分辨率下呈现一个低于另一个时，你会使用这个值很多次。对于花车:没有;在那里，财产扮演着重要的角色。

---

很少有真实的例子能说明浮点数的用处。

我们已经看到的第一个示例是创建一个或多个列布局。 使用img浮动在p内，这将使我们的内容流动。

演示(没有浮动img)

演示2 (img向左浮动)

使用浮动创建水平菜单-演示

---

浮动第二个元素，或者使用margin

最后但并非最不重要的，我想解释一下这种特殊情况，你只将一个元素浮动到左边而不将另一个元素浮动到左边，那么会发生什么呢?

假设我们去掉float: right;在.floated_right类中，div将从最左侧呈现，因为它不是浮动的。

Demo

在这种情况下，你也可以让它向左浮动

OR

你可以使用margin-left，它将等于左浮动列的大小，即200px宽。

这是因为div的浮动。添加overflow:隐藏在外部元素。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

You confuse how browsers renders the elements when there are floating elements. If one block element is floating (your inner div in your case), other block elements will ignore it because browser removes floating elements from the normal flow of the web page. Then, because the floated div has been removed from the normal flow, the outside div is filled in, like the inner div isn't there. However, inline elements (images, links, text, blackquotes) will respect the boundaries of the floating element. If you introduce text in the outside div, the text will place arround de inner div.

换句话说，块元素(标题、段落、div等)忽略浮动元素并进行填充，而内联元素(图像、链接、文本等)尊重浮动元素的边界。

这里有一个小提琴的例子

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

你可以使用溢出属性的容器div，如果你没有任何div显示在容器上，例如:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

下面是下面的css:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- 或 ------------------------------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

下面是下面的css:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

试试这个

.parent_div{
    display: flex;
}