我仍在努力改进我的第一个网站元素。一个反复让我头疼的问题是有些部分不断溢出到上面的部分。当我说溢出时，我的意思是当我点击括号中的元素时，当在实时预览中突出显示时，它显示的边距实际上围绕在上面的其他内容周围(如图所示)。这种情况发生在我网站的各个部分，我不明白为什么。我是这里的初学者，所以我确信关于为什么以及如何在整个网站上普遍修复它的原因很简单。
对于一些部分，我可以使用“overflow: none”属性来解决这个问题，但理想情况下我想解决这个问题而不需要重复使用它。注意，overflow none 属性不起作用对于所有部分，尤其是我展示了一张图片的部分。有人可以在这里说清楚吗？
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
color: #4E6E9B;
font-family: 'Signika', sans-serif;
font-weight: 'E';
}
/* END GENERAL STYLES -----------*/
.one-third-container {
float: left;
width: 100%;
overflow: hidden;
}
.about-one-third {
width: 33.3333%;
padding: 2% 0;
float: left;
text-align: center;
background-color: #0066B2;
color: #f6f8fa;
}
.about-one-third i {
font-size: 8rem;
padding-bottom: 5%;
}
/* END ONE THIRD SECTIONS ------*/
.services-offered {
padding-left: 0;
margin: 2% 5%;
-webkit-padding-start: 0;
list-style-type: none;
overflow: none;
}
.services-offered li {
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0 0 0 1.8rem;
text-align: justify;
}
.services-offered li:before {
content: "\f00c";
font-family: FontAwesome;
width: 1.8rem;
margin-left: -1.8rem;
margin-right: 0.5rem;
}
/* END SERVICES OFFERED ---------*/<!DOCTYPE html>
<html>
<head>
<title>W Gooderham Gas Services</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
<div class="one-third-container">
<section class="about-one-third">
<td>
<i id="third-border" class="fa fa-calendar"></i>
</td>
<h2>Routine Servicing</h2>
</section>
<section class="about-one-third" id="centre-third">
<td>
<i id="third-border" class="fa fa-wrench"></i>
</td>
<h2>Installation</h2>
</section>
<section class="about-one-third" id="breakdown">
<td>
<i class="fa fa-snowflake-o"></i>
</td>
<h2>Breakdowns</h2>
</section>
</div>
<! END ONE THIRD SECTION --------------------->
<ul class="services-offered">
<li>
Installation and commission of natural gas central heating systems.
</li>
<li>
Routine servicing of all natural gas appliances including warm air units.
</li>
<li>
If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
</li>
<li>
We can provide gas safety landlord certification for all gas appliances in your properties.
</li>
</ul>
最佳答案
元素“溢出”到上面的元素的原因是因为你在类 one-third-container 上使用了 float: left;(这很好!) .但是，如果下面的元素没有任何 float，您会得到元素被推得比预期更高的不良结果。如果您将 float:left; 添加到 ul(或类 services-offered)，您可以避免此问题。
编辑:删除 float:left 也适用于这种情况，因为元素不需要 float 。
编辑 2:花车确实不像几年前那么受欢迎。未清除的元素是使用 float 时的常见问题，这就是为什么 flexbox 被认为更好的原因。 Flexbox 有很多用例可以简化许多布局问题，如果没有 Flexbox，解决起来会有点棘手。然而，在不考虑任何元素的情况下在每个元素上使用 flexbox 可能会产生不需要的结果，例如:
.container {
height: 500px;
display:flex;
}<div class="container">
<img src="http://via.placeholder.com/350x150">
</div>在代码片段中，图像是倾斜的。您可以通过将 align-items 添加到 .container 来很容易地解决这个问题，但要点是，在所有元素上使用 flexbox 可能在不必要的地方引起问题。
也就是说，只要您注意要应用它的元素，使用 flexbox 绝对是一件好事。
关于html - 部分反复溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46430197/