when i remove overflow hidden css property from ul then why does ul tag stops showing?
11 Replies
it's a weird interaction with
float: left on the LI's
you shouldn't use float for this purpose, it's only valid use is to get text to flow around images in a paragraph
the li's are still "visible" on the page btw, they're just white text on a white background. For some reason I don't really care to delve into, overflow: hidden seems to restore the height of the UL, which it doesn't have normally because all it's children are floated
this is a prime use case for display: flex instead of float
produces the exact same result as your floatik that and i know about flexbox as well but i wana know how this is working
I wouldn't rely on this behavior at all, it doesn't feel like this is necessarily intended
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
w3schools is terrible
what do u recomend
it's outdated and gives incorrect and incomplete information
mdn
just never do this float thing, you basically only need it when you have an article with a small inset like an image in a magazine
reason is simple you are using float, I suggest to use clearfix or display flow-root
here is the code with flow root
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flow-root;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
would we debate no that ?
What?
I mean, we should have some conversion why not use the float at first place. So it will be helpful for everyone
there's honestly not that much to discuss about it. The use case for float is to cause text to flow around a floated element: https://developer.mozilla.org/en-US/docs/Web/CSS/float
It used to be abused to create certain layouts, but it's not necessary to misuse it anymore because
display: flex has excellent support
basically, it's the same as table layouts. Used to be necessary, but now it's an anti-pattern