Html 与浮动和保证金相关的奇怪行为
问题是具有Html 与浮动和保证金相关的奇怪行为,html,css,position,Html,Css,Position,问题是具有.parent类的div的位置。它不在窗口的顶部，但低于100px，这正是.child的页边距底部的值 有人能解释一下这里发生了什么吗 这是我的HTML文档： <html> <head> <style> .parent { } .child { margin-bottom:100px; }
.parent.child的页边距底部的值
有人能解释一下这里发生了什么吗
这是我的HTML文档：
<html>
<head>
<style>
.parent {
}
.child {
margin-bottom:100px;
}
button {
float:left;
height:30px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button>click me!</button>
</div>
</div>
</body>
</html>
.家长{
}
.孩子{
边缘底部：100px；
}
钮扣{
浮动：左；
高度：30px；
}
点击我！
由不完全处理和
空白块上的边距折叠
如果没有边框、填充、内联内容、高度或最小高度来分隔块的页边距顶部和页边距底部，则其顶部和底部页边距将塌陷
您需要使用overflow:auto父项上编码>
或
通过清除您的浮动即：
注意：使用背景色将有助于您在未来针对此类问题：
“父项没有可见背景色？”99%浮动问题
利润率下降问题：
.parent{
背景：红色；
}
.孩子{
背景：金；
边缘底部：100px；
}
钮扣{
浮动：左；
高度：30px；
}
左浮动按钮
什么意思“element.div.parent不在窗口顶部”？我没有看到任何内容。是浮动造成的，但不确定原因。我认为这是由于保证金崩溃+不是BFC根。尝试放置一个位置：相对身体上编码>并查看发生了什么。
.clear:before,
.clear:after{
content: " ";
display: table;
}
.clear:after{
clear: both;
}