Html Question posted in
Some basic documentation can be found here.

Html – What is the difference between overflow Hidden and Visible

This is my HTML code.

body {
    text-align: center;
}

ul {
    overflow: hidden;
    background-color: #1d6b0d;
    list-style-type: none;
}

li {
    float: left;
}

li a {
    text-decoration: none;
    color: white;
    padding: 0.5rem;
}
<h3>HTML Horizontal Unordered List</h3>

<ul>
    <li><a href="#course">Course</a></li>
    <li><a href="#Blog">Blogs</a></li>
    <li>
        <a href="#Content">Content</a>
    </li>
</ul>

This is the output.

I changed overflow to visible.
Now this is the output.

According to what I studied, overflow:visible must make the overflowed content visible. But,
here in my code, visible is making the list disappear. hidden is making the list visible. I tried asking AI, but did not get any satisfactory answer.

Why is overflow:hidden making the list visible?

Tags:

2

Answers


  1. 0

    When using "overflow: visible," the overflowed content is visible, but the parent element’s height remains at 0. This means that the background color and other styles won’t apply to the overflowed area. On the other hand, "overflow: hidden" forces the parent element to contain its floated children, creating a new block formatting context. This causes the ‘ul’ to wrap around its floated children and apply the background color and other styles to the entire area. Therefore, in your case, "overflow: hidden" is the reason the list is visible.

    Login or Signup to reply.
  2. 0

    By default, the overflow of elements is set to visible. When you use overflow: hidden; the element disappears from view but is not removed.

    However, when you use the float property, you may encounter many problems because float itself changes the element’s height, width, and display properties to move the element across the container. Therefore, you should avoid using the float property. If you do use it, remember to set display: flex; (or display: table;) on the parent element <ul>.

    I highly recommend that you stop using float and switch to Flexbox instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search