61,115
社区成员
发帖
与我相关
我的任务
分享请教一个有关浮动的基础问题：为什么浮动以后会出现分离？
在一个div元素浮动以后，在文档流中的后序div元素会出现这样的情况：该div元素占据浮动元素原先的位置，但其子元素却会与其分离，仍呆在原来的位置上，请问这是为什么？
*{
margin:0;
position: relative;
}
.one {
height:200px;
width:400;
background-color: darkorange;
float:left;
}
.two {
height:200px;
width:200px;
background-color:aquamarine;
z-index:999;
}
</style>
</head>
<body>
<div class="one"><p>11111</p></div>
<div class="two"><p>22222</p></div>
</body>
.one浮动以后，可以看到.two的盒子去了原来.one的地方，但22222还留在原先的地方，为什么会出现这种分离的现象？
浮动前：
浮动后：
*{
margin:0;
position: relative;
}
.one {
height:200px;
width:400;
background-color: darkorange;
float:left;
}
.two {
height:200px;
width:200px;
background-color:aquamarine;
z-index:999;
}
</style>
</head>
<body>
<div class="one"><p>11111</p></div>
<div class="two"><p>22222</p></div>
</body>
.one浮动以后，可以看到.two的盒子去了原来.one的地方，但22222还留在原先的地方，为什么会出现这种分离的现象？
浮动前：
浮动后：
...全文
请发表友善的回复…
发表回复
StarXDer!!! 2018-11-16
- 打赏
- 举报
因为浮动元素默认是被文本流环绕，而且float会导致原先占据的位置消失，这个时候2中外层会补上，但是文本上不来。
也就是脱离文档流但不脱离文本流。
就导致了2中文字不随父元素一起移动的现象。
为了验证这个思路，我们把文本给去掉看一下
.
可以通过p的高度的变化看出
P并没有脱离母元素，只是文本溢出了。
就是给挤出去了2333
.
可以通过p的高度的变化看出
P并没有脱离母元素，只是文本溢出了。
就是给挤出去了2333
hipparch 2018-10-25
- 打赏
- 举报
难道22222不是文本流？为啥不随着自己的父元素div一起上去呢？
hipparch 2018-10-25
- 打赏
- 举报
我觉得不是继承的问题，继承应该是指继承父元素的属性，如果给.two添加 float:left，22222是会和块一起浮动到.one边上去的。
换句话说，上图怎样添加一些代码让22222和块一起上去呢？不要告诉我负边距什么的
LogoHeWei 2018-10-25
- 打赏
- 举报
浮动就是脱离文本流啦，比如浮动经常出现的问题高度塌陷，第二个被覆盖因为你用的定位
代码caigou~旺旺旺 2018-10-25
- 打赏
- 举报
因为浮动不会继承
