Html 为什么这个div在这个短代码中位于另一个div之后？

我怀疑我知道这是为什么，但我需要在这个问题上的专家知识来修复它，因为我需要保持背景图像

我和他的孩子们有了第一个家长部门：

<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
                          <div style="width:33%;">
                              <div class="block">
       some content    

                              </div>
                              </div>


                          <div style="float:left; width:33%;">
                                <div class="block">
some content                   

                                </div></div>




                               <div style="float:left; width:33%;">
                                <div class="block">
       some content       


                                </div></div> 



                          </div>

CSS：

    #banner_index{
    border-bottom:2px solid whitesmoke;
    width:100%;
    min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
    color:whitesmoke;
}

    .banner_message{
        font-size:x-large;
        padding:1%;
        font-family:print clearly;
        text-transform: uppercase;
        display:block;

    }

---

现在定义你的

#banner_索引

清除

二者和
#wtf{宽度：100%；}

#banner_index{clear:both;}


#wtf{宽度：100%；}
#横幅索引{
边框底部：2件纯色白烟；
宽度：100%；
明确：两者皆有；
最小高度：700px；
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
背景图片：url（“../images/category/478969.jpg”）；
背景色：黑色；
颜色：白烟；
}
.banner_信息{
字号：x大号；
填充：1%；
字体系列：打印清晰；
文本转换：大写；
显示：块；
}

一些内容
一些内容
一些内容



一些味精
一些味精
一些味精
一些味精
一些味精
一些味精
一些味精
一些味精
添加
左边距：-159px；边缘顶部：16px
到
div
这里是更新的您的输出是什么样子的？@Webruster:
#banner_index
隐藏在
#wtf
div的后面，而特定的
在
跨越
的地方停止，就好像因为背景而忽略了
#banner_index
的第一部分。这是什么你在期待什么@Webruster：没错，但这种技术会使背景图像消失，为什么请问您在白烟下看到了黑色背景吗？谢谢您的回复。它只解决了部分问题<代码>清除：两个
都转换了
#banner_索引
。然而，它使背景消失了。
#banner_index{clear:both;}