为什么 "float: left" 解决了这个保证金问题？
Why does "float: left" fix this margin issue?
我得到了一些练习代码，它显示了三个餐厅菜单项。它具有响应能力，并具有 "small"、"medium" 和 "large" 模式。由于某些原因，作者在 "small" 模式下没有给出蓝色容器 "float: left" 样式。我不知道为什么，但这会导致页眉框上方有一个小边距。
* {
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
font-size: 175%;
text-align: center;
}
#p1 {
background-color: #6666ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p2 {
background-color: #9966ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p3 {
background-color: #3366ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
p {
border: 1px solid black;
padding: 50px 15px 15px 15px;
margin: 10px;
text-align: left;
background-color: #ccffff;
}
.row {
width: 100%;
}
/*.menu-box {
float: left;
}*/
@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;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Our Menu </h1>
<div class="row">
<div class="col-lg-4 col-md-6 menu-box"><p id="p1" class="menu-header-box">Chicken</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p2" class="menu-header-box">Beef</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p3" class="menu-header-box">Pork</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
</div>
</body>
</html>
代码：https://jsfiddle.net/awto1c3b/
显示问题的图像：
"Medium mode"-- okay
"Small mode"-- weird margin above header box!
我知道如果我把 "float: left" 放在所有框上，那么边距问题就不会出现（你可以取消注释 CSS 中的 .menu-box 说明符），但是我不明白"float: left"和里面的内容有什么关系，为什么会影响里面的边距？我希望比我更有知识的人能够阐明正在发生的事情。
这一切的原因与某些情况下的垂直边距折叠有关。
这就是这里发生的事情：
案例 1 - parent 浮动：
当 parent 元素浮动时，每个 child 元素的垂直边距被识别为在 parent 元素内 - 如果您要在 parent 元素代替。由于 parent 没有 background-color 并且两个 children 都有相同的边距顶部，所以看起来根本没有 margin-top。
如果您为 parent 设置背景颜色，您会看到 top-margin 被应用到两个 children 并且您会看到 children 的顶部边框偏移parent 元素。
情况 2 - parent 不浮动
当 parent 不浮动时，文档流中每个 child 的垂直边距（在本例中 <p> 不浮动）被推到它们的外部parent 元素。然而，浮动 child 元素 (<p class="menu-header-box">) 的边距被视为 parent 本身是浮动的——它被识别为在 parent 容器内（见上面的案例 1）。这就是您的“奇怪利润”的来源。您可以在浏览器的开发人员工具中查看此内容或通过将 background-color 应用于 parent 元素来轻松检查。因为只有两个 child 元素，第一个是浮动的，所以只有第二个元素决定了 parent 的高度。因此，您只会看到 parents background-color 出现在左侧和右侧，而不是像案例 1 中看到的那样出现在顶部和底部。
我得到了一些练习代码，它显示了三个餐厅菜单项。它具有响应能力，并具有 "small"、"medium" 和 "large" 模式。由于某些原因，作者在 "small" 模式下没有给出蓝色容器 "float: left" 样式。我不知道为什么，但这会导致页眉框上方有一个小边距。
* {
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
font-size: 175%;
text-align: center;
}
#p1 {
background-color: #6666ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p2 {
background-color: #9966ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
#p3 {
background-color: #3366ff;
font-size: 125%;
text-align: center;
float: right;
padding: 5px 40px 5px 40px;
}
p {
border: 1px solid black;
padding: 50px 15px 15px 15px;
margin: 10px;
text-align: left;
background-color: #ccffff;
}
.row {
width: 100%;
}
/*.menu-box {
float: left;
}*/
@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;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px){
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment Solution for Module 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Our Menu </h1>
<div class="row">
<div class="col-lg-4 col-md-6 menu-box"><p id="p1" class="menu-header-box">Chicken</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p2" class="menu-header-box">Beef</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
<div class="col-lg-4 col-md-6 menu-box"><p id="p3" class="menu-header-box">Pork</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis
fringilla elit sit amet tincidunt. Maecenas lacinia sem nec lobortis luctus.
In molestie volutpat tempor. Duis posuere ante eget finibus semper. Fusce
pretium enim sit amet tortor convallis, vel mollis eros lacinia. Vestibulum
dapibus arcu vitae viverra condimentum. Rutrum turpis quis, posuere velit.
Morbi dictum dui quis molestie finibus. Phasellus sed aliquet leo.</p></div>
</div>
</body>
</html>
代码：https://jsfiddle.net/awto1c3b/
显示问题的图像：
"Medium mode"-- okay
"Small mode"-- weird margin above header box!
我知道如果我把 "float: left" 放在所有框上，那么边距问题就不会出现（你可以取消注释 CSS 中的 .menu-box 说明符），但是我不明白"float: left"和里面的内容有什么关系，为什么会影响里面的边距？我希望比我更有知识的人能够阐明正在发生的事情。
这一切的原因与某些情况下的垂直边距折叠有关。
这就是这里发生的事情：
案例 1 - parent 浮动：
当 parent 元素浮动时，每个 child 元素的垂直边距被识别为在 parent 元素内 - 如果您要在 parent 元素代替。由于 parent 没有 background-color 并且两个 children 都有相同的边距顶部，所以看起来根本没有 margin-top。
如果您为 parent 设置背景颜色，您会看到 top-margin 被应用到两个 children 并且您会看到 children 的顶部边框偏移parent 元素。
情况 2 - parent 不浮动
当 parent 不浮动时，文档流中每个 child 的垂直边距（在本例中 <p> 不浮动）被推到它们的外部parent 元素。然而，浮动 child 元素 (<p class="menu-header-box">) 的边距被视为 parent 本身是浮动的——它被识别为在 parent 容器内（见上面的案例 1）。这就是您的“奇怪利润”的来源。您可以在浏览器的开发人员工具中查看此内容或通过将 background-color 应用于 parent 元素来轻松检查。因为只有两个 child 元素，第一个是浮动的，所以只有第二个元素决定了 parent 的高度。因此，您只会看到 parents background-color 出现在左侧和右侧，而不是像案例 1 中看到的那样出现在顶部和底部。