Html 使用Bootstrap的不同浮点行为

我正要回答别人的问题，突然发现了一个奇怪的行为，我现在无法解释。下面的代码片段中有HTML和CSS代码。如果您在全屏上查看，左下角的蓝色

div

位于红色下方。我也在JSFIDLE上测试了这段代码，它的工作原理与预期一致。蓝色

div

与红色对齐

现在，我知道会发生这种情况，因为在Stackoverflow中，自定义CSS在引导之前应用，而在JSFIDLE上则相反。因此，这些样式会被彼此覆盖，具体取决于它运行的平台。 我也知道，这不是创建两列布局的常用方法。如前所述，我在回答问题时发现了这种行为。在本例中，提出问题的人无法更改HTML结构，因此我们必须处理这个问题

我不知道的是，为什么会有区别，因为它们都覆盖了

float:left带<代码>浮动：左我认为css来自哪里并不重要，行为应该是相同的

下面是小提琴的链接：

下面是堆栈片段


.blue{
边框：10px实心#fff；
背景：蓝色；
高度：150像素；
浮动：左；
}
瑞德先生{
边框：10px实心#fff；
背景：红色；
高度：300px；
浮动：对；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.红色，.蓝色{
浮动：无；
}
}
对于没有CSS结构经验的人来说，这是一个典型的错误。最好的方法是创建两列，如：

这是我留下的箱子
这是正确的盒子
如果您的内容是动态的，则必须针对出现问题的框，并在关闭此框后添加

.clearfix{clear:both/left/right}

但第一种方法是学术性的，以基于浮点的布局制作列。
正如您所说，样式的顺序是相同的。
但即使在蓝色块覆盖
float:left按<代码>浮动：左红色块有两种不同的行为：
float:left和浮动：右根据
.red
css类

因此，在fiddle代码段上，红色块浮动在右侧，允许bleu块对齐并在堆栈溢出时浮动，bleu尝试在红色块后向左浮动，但由于已经使用了12列，因此无法浮动。
首先使用了错误的fiddle链接，抱歉！我觉得他们两个看起来都一样。？有什么区别？在媒体查询中，您应该使用！重要的是，引导程序可以在默认CSS中使用它。检查bootstrap.css，他们可能会使用！对于此宽度很重要。请使用！重要信息：我的媒体查询不会改变任何内容。其实我只是想知道，为什么
float:left
在这方面有不同的行为。是的，我知道，正如前面提到的，这段代码来自另一个问题，其中HTML代码对于提问者来说是不可编辑的。这种结构不是我的第一种方法，我的第一个意图是为left和right创建两个包装器div。我只是好奇，为什么两者都飘浮：左；似乎有不同的行为。这就是我想要的答案，谢谢。我对蓝色的感到非常困惑，以至于我没有对红色的给予足够的关注。好的！