除非我删除 div 的浮动属性，否则 html 文档的正文不会超出 div答案

【问题标题】：Body of html document is not extending past a div unless i remove floating property of the div(s)除非我删除 div 的浮动属性，否则 html 文档的正文不会超出 div
【发布时间】：2020-08-30 15:22:45
【问题描述】：

我正在尝试借助我的 css 中的媒体查询，根据设备宽度向左浮动每个部分，将我的页面布局设置为三个部分。我已经成功地这样做了，尽管当我尝试使用 chrome 开发人员工具检查页面时，我可以确认我的正文没有跨越部分。在从媒体查询中删除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;
                                   
        }
        ....
}

【问题讨论】：

这是float的正常行为，元素被从文档Flow中取出，就好像它没有退出一样，如果该元素的父级只有它，那么父级的尺寸变为0

标签： html css css-float

【解决方案1】：

您可以将overflow: hidden; 应用于那些浮动元素的容器（在您的情况下为body？），以使其包含它包含的所有浮动子元素。这似乎是一件奇怪的事情，但这是解决该问题的常用方法。

【讨论】：

这个答案最有用。谢谢@Johannes

【解决方案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

它更强大，更有用。

【讨论】：