html - What does "overflow" do for this <ul> tag? -


i creating header menu using <ul> , wanted stretch top of page. first used width:100% didn't work.then saw similar example somewhere , had used overflow:hidden when used streched list end.i wanted know overflow in here , why width:100% can not similar action?

ul {  	list-style-type: none;  	padding: 0;  	margin: 0;  	overflow: hidden;  	background-color: black;  }  li {  	  	background-color: black;  	color: red;  	  	float: left;  }  li a{  	display: inline-block;  	color: white;  	text-decoration:none;  	padding: 20px;  	text-align: center;  	  }  li a:hover{  	background-color:red;  }
<!doctype html>  <html lang="fa">  	<head>  		<link rel="stylesheet" type="text/css" href="menu.css">   	</head>       <body>  	<ul>  		 <li><a target="_blank" href="http://www.google.com">google</a></li>  		<li><a target="_blank" href="http://www.yahoo.com">yahoo!</a></li>  		 <li><a target="_blank" href="http://www.amazon.com">amazon</a></li>  		   		 </ul>  	  		  	</body>  </html>  	

using overflow makes element stretch match children when have set float property - it's 1 of ways implement clearfix


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

mapreduce - Resource manager does not transit to active state from standby -

serialization - Convert Any type in scala to Array[Byte] and back -