Html 保证金不'；使用浮球时不工作_Html_Css_Css Float

Html 保证金不'；使用浮球时不工作

html css

Html 保证金不'；使用浮球时不工作,html,css,css-float,Html,Css,Css Float,我有3个div，它们叠在一起。都具有相同的宽度和高度，例如500px 500px 右上俯冲。第二个一页边距左侧和右侧设置为自动。第三个向左浮动。它们都有相同的边缘顶部为50px，并且都是透明的：两者都是当然，有一个包装div包装了3个div，宽度为100% 问题: 为什么第二个分区的边距顶部没有推送50像素的边距，而是与顶部分区重叠我试着在这里寻找类似问题的答案，但没有一个是我想要的下面是我正在做的html和css示例 <!DOCTYPE html> <html>

我有3个div，它们叠在一起。都具有相同的宽度和高度，例如500px 500px

右上俯冲。第二个一页边距左侧和右侧设置为自动。第三个向左浮动。它们都有相同的边缘顶部为50px，并且都是透明的：两者都是

当然，有一个包装div包装了3个div，宽度为100%

问题: 为什么第二个分区的边距顶部没有推送50像素的边距，而是与顶部分区重叠

我试着在这里寻找类似问题的答案，但没有一个是我想要的

下面是我正在做的html和css示例

<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{width:100%; clear:both;}
.haha{width:500px; height:500px; margin-top:50px; clear:both;}
.haha.right{float:right;}
.haha.left{float:left}
.haha.center{margin-left:auto; margin-right:auto;}
</style>
</head>
<body>
<div class="wrapper">
<div class="haha right"><img src="wahaha.jpg"></div>
<div class="haha center"><img src="wahaha.jpg"></div>
<div class="haha left"><img src="wahaha.jpg"></div>
</div>
</body>
</html>


.wrapper{宽度：100%；清除：两者；}
.haha{宽度：500px；高度：500px；边缘顶部：50px；清晰：两者；}
.haha.right{float:right；}
.haha.left{float:left}
.haha.center{左边距：自动；右边距：自动；}

JS Fiddle here

您可以通过将以下内容添加到.haha.right类中来获得所需的效果：

margin-bottom:50px;

至于为什么会出现这种情况，这与中间的div没有浮动有关，而其他div是浮动的。

我知道这是肮脏的。但你可以通过在每个分区之后添加单独的清理分区来实现这一点。哈哈，分区如下

<div class="wrapper">
<div class="haha right"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
<div class="haha center"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
<div class="haha left"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
</div>

JS小提琴

根据W3C:

由于浮动不在流中，因此会创建未定位的块框浮箱前后垂直流动，就像浮箱未垂直流动一样存在

如果我的解释是正确的，那么第二个div的上边距就在那里，但是设置在包装容器的边缘或其上方的任何非浮动元素上，这是因为浮动元素被认为是从文档的正常流中取出的

如果需要div1和div2之间的垂直间隙，请改为在div1上设置边距底部

#div1{
    float: right; 
    margin-bottom: 50px;/*set margin here instead*/
}

jsIDLE:

由于上面的框是浮动的，而中间的框不是浮动的是的，我知道上面的框是浮动的。有什么解决办法吗？谢谢。请参阅下面的解决方案，希望它适用于您的场景@Archampion已经有了一个答案您可以创建一个JSFIDLE来更好地说明这个问题嘿，谢谢您的快速修复。我知道这很有效，因为我已经试过了。但不知何故，我不得不使用margin top，因为这个例子会导致更复杂的事情，比如让用户输入div之间的空格。我想可能是这样的，我会在回家后仔细查看并更新我的答案

#div1{
    float: right; 
    margin-bottom: 50px;/*set margin here instead*/
}