Why is this <div> containing previous div? [duplicate] - html

Question

This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I have a problem where the top <div> element appears to be containing the <div> above it, although the source code would indicate that this should not be the case. An image of this effect is below, and you can see that my horizontal header seems to be contained in the same <div> as the <div> containing the "place" <h2> tag, but it is not and this should not be happening.
Here is the HTML for this section:
<div class="tabSection">
<div class="tabDiv">
<ul class="tabsList">
<li class="tabItem"><i class="fas fa-globe-europe"></i>Places</li>
<li class="tabItem"><i class="fas fa-skiing"></i>Activities</li>
<li class="tabItem"><i class="fas fa-info-circle"></i>More Info</li>
<li class="tabItem"><i class="fas fa-phone-alt"></i>Contact Us</li>
</ul>
</div>
<div id="placeTabBody" class="tabBody">
<h2 class="tabHeader">Place</h2>
</div>
<div id="activitiesTabBody" class="tabBody">
<h2 class="tabHeader">Activities</h2>
</div>
<div id="moreInfoTabBody" class="tabBody">
<h2 class="tabHeader">More Information</h2>
</div>
<div id="contactUsTabBody" class="tabBody">
<h2 class="tabHeader">Contact Us</h2>
</div>
</div>
</div>
And here is the CSS:
.tabsList {
list-style: none;
margin-left: 10px;
display: block;
}
.tabsList li {
display: block;
float: left;
font-size: 18pt;
width: 155px;
cursor: pointer;
margin-right: 18px;
margin-top: 20px;
border-bottom: 2px solid #e84118;
transition: 0.3s;
}
.tabsList li:hover {
border-color: #44bd32;
}
.tabsList li i {
margin-right: 7px;
}
.tabBody {
display: block;
background-color: red;
width: 100%;
margin: 10px 0 10px 10px;
}
Please help!

Answer 1

It seems a missing float clearing.
Add height: auto and overflow:hidden to .tabsList
.tabsList {
list-style: none;
margin-left: 10px;
display: block;
height: auto;
overflow: hidden;
}