除非删除div(s)的浮动属性，否则html文档的正文不会扩展到div。

Question

我试图将我的页面布局设置为三个部分，方法是在css中的媒体查询的帮助下，根据设备的宽度浮动剩下的每个部分。我已经成功地做到了这一点，尽管当我尝试使用工具检查页面时，我可以确认我的身体没有跨越整个部分。在从媒体查询中删除float属性时，body元素将按需要生成，尽管我的布局不会按需要设计，因为所有部分都位于一个不需要的块中。对这种行为是否有解释，或者如何纠正这个问题？下面是页面https://jsfiddle.net/nma71c4w/的jsfiddle页面的链接。谢谢你帮我解决这个问题。

<div class="col-lg-4 col-md-6 col-sm-12">
    <section>
       <div class="hidden-element">
            <h2 ></h2>
        </div>

        <div class="title-element">
            <h2 > Chicken</h2>
        </div>
        <div>
            <p>
             my contents
            </p>
        </div>
    </section>
</div>

导致错误的css样式是围绕类似的媒体查询。

@media (min-width: 992px){
        .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col- 
         lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
            float: left;
                                   
        }
        ....
}

Answer 1

您可以将overflow: hidden;应用于那些浮动元素的容器(在您的例子中，body?)为了让它包装它所包含的所有浮动子。这似乎是一件奇怪的事情，但这是解决这个问题的一种常见方法。

Answer 2

您可以在css中使用网格属性，而不是媒体查询。

<div class="main">

       <div>
            <h2 ></h2>
        </div>

        <div>
            <h2 > Chicken</h2>
        </div>
        <div>
            <p>
             my contents
            </p>
        </div>
   
</div>

css：

.main{
display:grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

这应该能解决你的问题。如果您不了解网格是什么，我建议您观看以下内容：https://youtu.be/t6CBKf8K_Ac

它更强大更有用。