What is the effect that the overflow property: Hidden is doing on the code?

Asked

Viewed 947 times

5

I have this very simple code down there. Only the problem is that if I take the property overflow of the code simply, add the background color and putting it again it appears because this is happening?

<!DOCTYPE html>
<html>
<head>
<style>

   ul
   {
      list-style: none;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
      background-color: #333333;
   }

   li
   {
      float: left;
   }
   
</style>
</head>
<body>

<h2>Navigation Manu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
   <li>Home</li>
   <li>News</li>
   <li>Contact</li>
   <li>About</li>
</ul>

</body>
</html>

html css

1 answer

7

The problem is you’re using float:left in the child elements of container. When you put float in the Sons the Father loses the reference of the values of the box-model of these elements, for now they are "floating" in the gift.

The use of property overflow of a value other than visible (its default value), will create a new block formatting context. This is technically necessary to prevent a floating content that contacts the object within the bearing area and breaks the lines of the content

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Read also about what is Block formatting context

One of the techniques to solve this is putting overflow:auto in the container Father, so, even though the Son has float he will not "flee" from the scope of the Father. Another technique for correcting this is by using the infamous Clearfix

Father here is the red-edged Box, and the Sons are the Blue Box with float

inserir a descrição da imagem aqui

Float serves for vc to "float" elements side by side. A div is a block element and functions as a box model, that is it takes up 100% of the screen width and accepts values from margin, padding and border. Hence, by div occupy 100% of the screen width it does not let others divs to stand by his side, to "correct" that was used the float

However, use float has a number of problems, the float causes a parent element to lose the reference of the box model of the son who has float, to prevent this behaviour, the technique of overflow or of clearfix

Clearfix technique

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    /* overflow: hidden; */
    background-color: #333333;
}

li {
    float: left;
}

/* clearfix */
ul::after,
ul::before {
    content: ' ';
    display: table
}

ul::after {
    clear: both
}
<h2>Navigation Manu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
    <li>Home</li>
    <li>News</li>
    <li>Contact</li>
    <li>About</li>
</ul>

Recommended reading: Float vs. inline-block. What are the advantages and disadvantages of each?

  • 1

    Oops, thanks helped a lot!!! was a little confused about overflow.

  • @Leandronascimento without problems my dear, I’m glad to have helped!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.