html 文档的 Body 没有超出 div 除非我删除 div(s) 的浮动属性

Question

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

<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？），以使其包裹所有浮动元素children 其中包含。这看起来很奇怪，但这是解决该问题的常用方法。

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

它更强大，更有用。

html 文档的 Body 没有超出 div 除非我删除 div(s) 的浮动属性

Body of html document is not extending past a div unless i remove floating property of the div(s)

html

css

css-float

html 文档的 Body 没有超出 div 除非我删除 div(s) 的浮动 属性

Body of html document is not extending past a div unless i remove floating property of the div(s)

html

css

css-float

html 文档的 Body 没有超出 div 除非我删除 div(s) 的浮动属性