浮动元素上面的固定元素

我遇到了这个非常有趣的事情。用浮动和clearfix搞乱了。我有一个部分（容器），其中包含3个左浮动div盒，并避免容器崩溃，我使用clearfix方法。像前后那样，清空内容，显示块并清除两者。没什么特别的。现在，为了了解这个clearfix如何在顶部和底部保留边界，我在容器外部的顶部创建了一个div框。容器的顶边和底边都是50px，所以它的效果很好。但奇怪的是，当我试图在容器外部漂浮一个橙色盒子时，盒子被容器内的孩子们容纳在容器内。我觉得这很奇怪，因为那个盒子不在容器的标签内，它在外面。我知道浮动元素会从正常的文档流中移除，因此容器的margin-top不能在div盒上继续传播，因为它已从文档流中移除，并且唯一依赖的元素是遗留下来的。但我的问题是：如果橙色盒子不是它的孩子，为什么橙色盒子被容纳在棕色容器内？前：浮动元素上面的固定元素

浮动后：权利;应用到橙色盒子：

我的意思是橙色盒子可能已被转移到其他地方奇怪，但不包含这么好听内部容器时，它不是容器甚至一个孩子，他们是兄弟姐妹。这里发生了什么？

代码为基础的：

<body> 
<div id="box1"></div> 
<section class="clearfix"> 
<div class="one">One</div> 
<div class="two">Two</div> 
<div class="three">Three</div> 
</section> 
<div id="box"></div> 
</body> 

.clearfix:before, 
.clearfix:after { 
content: ""; 
display: block; 
clear: both; 
} 

#box { 
width: 300px; 
height: 100px; 
background: blue; 
} 

#box1 { 
width: 300px; 
height: 50px; 
background: orange; 
float: right; 
}

来源

2016-08-14 Limpuls

请添加css一等二三。 –

.one background：rgb（207,255,245）; float：left; } .two { background：rgb（101,209,255）; float：left; } .three { background：rgb（255,231,181）; float：left; } – Limpuls

至于你提到你正在使用浮动：正确的橙色框和它去其他分区里面则是你还没有使用浮动后使用clear:both。要记住，如果你在使用clearfix之前和之后部分将无法工作。你必须使用清除：在浮动div后面修复，否则会打破流动，并会导致问题，如你所看到的。

请参阅demo。浮动右div后，我简单地使用clear:both，一切似乎都很好。为了使它更简单，尝试清除每次使用浮动：向右或向左，你不会有任何问题。如果你在上次使用clear div之后还是使用ul li标签，那么你就完成了。希望这会帮助你。

来源

2016-08-16 07:47:51

这可以简化为'.clearfix {clear：both; }'不需要额外的标签。 – Aziz

@Aziz我没有使用额外的标签，但欧普确实告诉他要说清楚。没有其他的。 –

浮动元素上面的固定元素

回答

相关问题