Geek Answers Handbook

CSS background color does not appear unless I add overflow: hidden? What for?

I am working on a CSS layout, but I don’t understand why the background color of my navigation bar does not appear unless I add overflow: hidden in CSS. Can someone explain to me what is going on? Thanks:)

My CSS file:

 @import "reset.css"; /* Meyer CSS reset */ body { background-color: #f3f3f3; font: 15px sans-serif; } #wrapper { width: 1000px; margin: 0 auto; } #navigation { width: inherit; margin-top: 20px; background-color: #ccc; overflow: hidden; } #navigation li { float: left; } #navigation li a { display: block; padding: 10px 10px; text-decoration: none; color: #000; } #navigation li a:hover { background-color: #aaa; }

My html file:

 <!DOCTYPE html> <html> <head> <title>Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/styles.css" /> </head> <body> <div id="wrapper"> <div id="navigation"> <ul> <li><a href="">Nav0</a></li> <li><a href="">Nav1</a></li> <li><a href="">Nav2</a></li> <li><a href="">Nav3</a></li> <li><a href="">Nav4</a></li> <li><a href="">Nav5</a></li> </ul> </div> <div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html>
+8
background-color css
source share
2 answers

overflow: hidden forces the container to set a new formatting format , which will contain the float. Without it, floating elements form their own formatting contexts and display regardless of the container from the normal stream.

+12
source share

You must use the clear fix class (either the empty element after <ul> , or use the clear fix class on <ul> so that the browser correctly clears the floats.

 .clearfix { zoom:1; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

I use most of the time. Here is the fiddle in action: http://jsfiddle.net/gpQ2f/1/

+2
source share

More articles:


All Articles