Question

我得到了一些练习代码，其中显示了三个餐厅菜单项。它反应灵敏，并具有“小”，“中” 和“大” 模式。由于某种原因，在“小” 模式下，作者没有给蓝色容器指定“ 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”与里面的内容有关，为什么它会影响里面的边距？我希望比我自己更有学识的人能够对正在发生的事情有所了解。

Answer 1

所有这些原因与垂直边距在某些情况下崩溃有关。

这是这里发生的事情：

情况1-父项处于浮动状态：

当父元素浮动时，每个子元素的垂直边距将被识别为在父元素内部-类似于是否要在父元素上设置填充。由于父母没有背景色，并且两个孩子的边距顶部都非常相同，因此似乎根本没有边距顶部。

如果为父级设置背景色，则会看到两个子级都应用了上边距，并且看到了父级元素顶部边框的偏移量。

情况2-父级不浮动

当父级不浮动时，文档流中每个子级的垂直边距（在本例中为<p>不浮动）被推到其父级元素之外。但是，浮动子元素（<p class="menu-header-box">）的边距的处理方式与父级本身在浮动一样-被识别为位于父容器内部（请参见上面的case1）。这就是您的“奇怪保证金”来自何处。在浏览器的开发人员工具中查看此内容或将背景色应用于父元素时，可以轻松地进行检查。由于只有两个子元素，而第一个是浮动的，因此只有第二个元素确定父元素的高度。因此，您只会看到父母的背景色出现在左侧和右侧，而不是案例1中看到的顶部和底部。

为什么“ float：left”可以解决此保证金问题？

1 个答案:

情况1-父项处于浮动状态：

情况2-父级不浮动