0

我发现当我混合浮动和非浮动 div 时，未浮动 div 的边距丢失。

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

看到这个小提琴（中心 div 上的 5px 边距丢失）

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

但是，如果我为浮动元素添加边距，那么它确实存在。有人知道为什么会这样吗？

编辑我更新了小提琴，这有点令人困惑要理解这个问题，请查看应该是 BETWEEN Center 和 Left div 的边距。或中心和右侧。空无一人。

4

1 回答 1

1

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

于 2013-07-26T19:06:29.100 回答