使用浮动元素时自动边距答案

【问题标题】：Margin auto when using Float element使用浮动元素时自动边距
【发布时间】：2021-09-04 01:02:07
【问题描述】：

我正在尝试使用 float left 和 center 其中一个容器构建一个响应式网站，我正在尝试使用 margin auto 但它似乎没有做任何事情。

您能指导我如何以响应的方式做到这一点吗？

我知道可能有比使用 float 更智能的解决方案，但我正在尝试了解有关 float 元素的更多信息。

        <style>
    * {
     box-sizing: border-box;
     margin: 0px;
     }

     html, body {
     height: 100%;
     }

     header {
        height: 30%;
        width: 100%;
        float: left;
        border-style: solid;
     }
     nav {
        width: 40%;
        height: 80%;
        border-style: solid;
     }

     .navbar {
        float: right;
     }

     .part1 {
        width: 40%;
        height: 80%;
        border-style: solid;
        margin:  auto;
        float: left;
     }

     .whole {

     }

     main {
        border-style: solid;
        float: left;
        height: 50%;
        width: 100%;
     }

     footer {
        border-style: solid;
        float: left;
        width: 100%;
        height: 20%;
     }
    </style>

HTML：

 <body>
        <header>
            <nav class="navbar">
            </nav>
        </header>
        <main class="whole">
            <div class="part1">
            </div>
            <div class="part1">
            </div>
        </main>
        <footer>
        </footer>
    </body>

谢谢

【问题讨论】：

提示：flex 已经使float 的大多数用例过时。

标签： html css centering floating

【解决方案1】：

    * {
     box-sizing: border-box;
     margin: 0px;
     }

     html, body {
     height: 100%;
     }

     header {
        height: 30%;
        width: 100%;
        float: left;
        border-style: solid;
     }
     nav {
        width: 40%;
        height: 80%;
        border-style: solid;
     }

     .navbar {
        float: right;
     }

     .part1 {
        width: 40%;
        height: 80%;
        border-style: solid;
        margin:  auto;
        float: left;
     }

     .whole {
      display:flex;
     }

     main {
        border-style: solid;
        float: left;
        height: 50%;
        width: 100%;
     }

     footer {
        border-style: solid;
        float: left;
        width: 100%;
        height: 20%;
     }

 <body>
        <header>
            <nav class="navbar">
            </nav>
        </header>
        <main class="whole">
            <div class="part1">
            </div>
            <div class="part1">
            </div>
        </main>
        <footer>
        </footer>
    </body>

【讨论】：