我正试图使用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>
谢谢
* {
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>