在浮动和非浮动div之间缺少边距 [英] Missing margin between floating and nonfloating divs

问题描述

我发现当我混合浮动和非浮动div时，缺少div的边缘缺失。

HTML

 < div class =d0 d1> 
 Left 
< / div> 
< div class =d0 d2> 
 Right 
< / div> 
< div class =d0 d3> 
中心
< / div> 
  

CSS

  .d0 {
 height：100px; 
 border：1px solid＃333; 
} 
 
 .d1 {
 float：left; 
 width：100px; 
} 
 
 .d2 {
 float：right; 
 width：100px; 
} 
 
 .d3 {
 overflow：hidden; 
 width：auto; 
 margin：5px; 
} 
  

看到这个小提琴

http://jsfiddle.net/ozrentk/f5VFc/2 /

但是，如果我为浮动元素添加margin，那么它就会存在。
有人知道为什么会发生这种情况？

编辑我更新了小提琴，这有点令人困惑
理解问题，看看应该是中心和左div的边缘。或中心和权利。没有。

解决方案

正在运行的问题是非浮动元素将会忽略文档流中的浮动元素。
应用边距，但由于非浮动div不能识别浮动的div，因此它相对于页面边缘而不是浮动div。
您可以在这里阅读更多： http://spyrestudios.com/ css-in-depth-floats-positions /

I found that when I mix floated and nonfloated divs, margin of unfloated div is missing.

HTML

<div class="d0 d1">
    Left
</div>
<div class="d0 d2">
    Right
</div>
<div class="d0 d3">
    Center
</div>

CSS

.d0 {
    height: 100px;
    border: 1px solid #333;
}

.d1 {
    float: left;
    width: 100px;
}

.d2 {
    float: right;
    width: 100px;
}

.d3 {
    overflow: hidden;
    width: auto;
    margin: 5px;
}

See this fiddle (5px margin on center div is missing)

http://jsfiddle.net/ozrentk/f5VFc/2/

However, if I add margin to floating elements, then it's really there. Does someone know why is this happening?

EDIT I updated the fiddle, it was a bit confusing To understand the problem, look at the margin that should be BETWEEN Center and Left div. Or Center and Right. There is none.

解决方案

The problem you are running into is that a non floated element will ignore floated elements within the document flow. The margin is being applied, but since the non floated div does not recognize the floated one, its is relative to the edge of the page and not the floated div. You can read more about it here: http://spyrestudios.com/css-in-depth-floats-positions/

这篇关于在浮动和非浮动div之间缺少边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！