为什么这个浮动 div 不进入其父元素？答案

【问题标题】：why this floating div do not goes into its parent element?为什么这个浮动 div 不进入其父元素？
【发布时间】：2014-09-04 00:20:41
【问题描述】：

http://jsfiddle.net/hL8tvet8/

看看上面的小提琴。

据我所知，浮动元素会进入其父元素的内部。

但事实并非如此。我不知道为什么。

我想让浮动的蓝色 div 移动到其父级绿色 div。

为什么这个浮动的 div 跑出了它的父 div 的区域？

下面是示例代码（http://jsfiddle.net/hL8tvet8/）

html：

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
</div>

css：

.header {width: 200px; background-color: green;}
.left {width:50px; height: 50px; background-color: red;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

【问题讨论】：

标签： css position

【解决方案1】：

交换 left 和 float_r 元素的顺序。 div 是块元素。

见小提琴：http://jsfiddle.net/hL8tvet8/4/

<div class="header">
    <div class="float_R"></div>
    <div class="left"></div>
</div>

【讨论】：

只有你知道我想要什么。谢谢你。而且我知道 div 是块元素。但这会是第二个 div(floating) 没有进入其父元素区域的原因吗？为什么会这样……为什么会这样？？？？为什么？？？为什么第二个跑出它的父块元素区域？
简短的回答是因为第一个 div 有自己的“块”。您可以清除浮动以获得相同的效果，或者浮动元素可以先行。另一种选择是将另一个向左浮动，以便它们浮动在同一平面上。（我假设您不想这样做）您想阅读“margin-collapses”和“clear”。 developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
边距折叠是关于相邻块元素之间的空间。这不可能是这种现象的原因：具有浮动属性的最后一个子元素跑出其父块元素的区域。我仍然不知道为什么仅通过交换元素来解决问题...
我的意思是，不知道为什么浮动 div 停留在第一个 div 之下。

【解决方案2】：

看到这个answer。

更新fiddle。

html:

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
</div>

css:

.header {width: 200px; background-color: green;overflow:hidden;}
.left {width:50px; height: 50px; background-color: red;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

（为什么我必须粘贴代码，这样我才能发布小提琴链接？:-？）

基本上浮动元素的父级会崩溃。所以你的假设是错误的。 :(

【讨论】：

【解决方案3】：

你应该试试这个：

CSS：

.header {
    background-color: green;
    display: inline-block;  /*added*/
    width: 200px;
}
.left {
    background-color: red;
    float: left;           /*added*/
    height: 50px;
    width: 50px;
}
.float_R {
    background-color: blue;
    float: right;
    height: 50px;
    width: 50px;
}

工作Fiddle。

【讨论】：

【解决方案4】：

这是一个基本问题

<div class="header">
   <div class="left"></div>
   <div class="float_R"></div>
   <div style="clear:both;"></div>
</div>

.header {width: 200px; background-color: green;}
.left {width:50px; height: 50px; background-color: red;float:left;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

【讨论】：

【解决方案5】：

您可以像这样颠倒 2 div 的顺序：

演示：http://jsfiddle.net/Vinyl/ctxsr2um/1/

<div class="header">    
    <div class="float_R"></div>
    <div class="left"></div>
</div>

或者您可以在第一个 div 上添加带有 clear:both 和 float:left 的 div：

演示：http://jsfiddle.net/Vinyl/f8y7010h/

更多信息clear：https://developer.mozilla.org/fr/docs/Web/CSS/clear

HTML：

<div class="header">    
    <div class="float_R"></div>
    <div class="left"></div>
</div>

CSS：

.header {
    width: 200px;
    background-color: green;
}
.left {
    float:left;
    width:50px;
    height: 50px;
    background-color: red;
}
.float_R {
    width:50px;
    height: 50px;
    background-color: blue;
    float:right;
}

【讨论】：

【解决方案6】：

在两个浮动子 div 之后，您必须使用 clear:both; 清除浮动效果：

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

更新代码：

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
    <div style="clear:both"></div>
</div>

FIDDLE 更新：

http://jsfiddle.net/ehsansajjad465/hL8tvet8/8/

如果你想让两个 div 彼此相对，那么让 left div 也向左浮动：

.left {width:50px; height: 50px; background-color: red;float:left;}

DEMO FIDDLE

【讨论】：

【解决方案7】：

由于 div 是块元素，它们会相互堆叠。您需要使它们成为内联块。你可以试试这个

.header {
width: 200px;
background-color: green;
font-size: 0; /*added to remove unwanted bottom margin on inline blocks*/
}
.left {
display:inline-block; /*added*/
width:50px;
height: 50px;
background-color: red;
}
.float_R {
width:50px;
height: 50px;
background-color: blue;
float:right;
}

JS FIDDLE LINK

【讨论】：

【解决方案8】：

虽然<div class="left"></div> 的宽度是 50px，但它会生成一个块框，因此下一个位于下方。

看看：MDN Visual formatting model

在正常流程中，在块格式化上下文中，放置框垂直一个接一个地出来。

为避免这种情况，您可以使用float 属性从正常流中删除第一个 div。

Example jsfiddle

【讨论】：