0

I am new in learning CSS and while I am training to create a navigation bar using just a few declarations of CSS I did not know I faced this problem with this code enter image description here

After overflow: hidden in the parent of the children the problem was fix. My question is that how and why overflow can fix this problem I know that overflow is just for the text that flow out of a box

    .parent {
  background-color: rgb(10, 64, 85);
  padding: 20px;
  overflow: hidden;
}
.parent div {
  color: white;
  text-align: center;
  background-color: rgb(0, 105, 153);
  padding: 10px;
  width: calc((100% / 6) - 24px);
  display: inline-block;
  float: left;
  margin: 0px 2px;
  font-size: 20px;
}
Jamel Hanouneh
  • 1
  • Just a tip: instead of using `float:left` on the divs, it's better to use `display:flex` on the parent. That will cause the divs to be positioned next to each other. You won't need to puzzle with `clearfix`, `overflow` and `inline-block` anymore, so it's much easier. – Kokodoko Jan 03 '22 at 12:29
  • I know this info, but my question is why overflow can fix this problem – Jamel Hanouneh Jan 03 '22 at 12:49

0 Answers0