Question

看上面的小提琴。

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

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

我想让漂浮的蓝色div移动到它的父绿色div。

为什么这个浮动div会逃离其父div区？

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;}

Answer 1

交换左边和float_r元素的顺序。 Div是块元素。

请参阅小提琴：http://jsfiddle.net/hL8tvet8/4/

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

Answer 2

你应该试试这个：

<强> 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。

Answer 3

请参阅此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;}

（为什么我必须粘贴代码，所以我可以发布一个小提琴链接？： - ？）

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

Answer 4

在两个浮动子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 UPDATED：

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

如果你想让两个div彼此相反，那么左边的div也可以向左浮动：

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

DEMO FIDDLE

Answer 5

这是一个基本问题

<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;}

Answer 6

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

DEMO：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：

DEMO：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;
}

Answer 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

Answer 8

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

看看：MDN Visual formatting model

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

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

Example jsfiddle

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

8 个答案:

更新代码：

FIDDLE UPDATED：