Using overflow property with hidden value

The next method we'll look at is overflow: hidden. Go to your CSS and find the .secondary-section class. What we can do is add the overflow property with the value of hidden:

.secondary-section { 
  margin-bottom: 50px; 
  background-color: #7EEEAF; 
  overflow: hidden; 
} 

overflow: hidden is a true hack. It was never meant for remedying collapsed containers; it was meant for hiding any content image or text that overflowed its container. However, magically, overflow: hidden also clears the collapse. If we save our CSS and go to our site, we will see this is evident by the background, which is now green in color:

A small problem with overflow: hidden is that you may want the content to overflow the container, for instance, a drop-down menu or tooltip. The overflow: hidden hack will hide that overflow—no surprises there! It's a solution, but it may not always be ideal. For instance, in our exact scenario, we may want this octopus to kind of creep out of its container. Let's go into Chrome DevTools and give it margin-top: -50px. As you can see, now the top of the image is no longer showing and the overflow is hidden:

So that's not a good fix for us. Let's delete that overflow: hidden declaration from our CSS file and look at the next method: the float method.