浮动元素会影响后边的元素，但不会影响前边的元素
清除浮动：
方法一：在浮动元素后面添加一个空元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:100px; height:100px; background:#abcdef; float:left; border:1px solid; } .clear{ clear:both; } </style> </head> <body> <div class="wrap"> <div class="box"></div> <div class="box"></div> </div> <div class="clear"></div> <div class="last"> last~ </div> </body> </html>
方法二：
给浮动元素的父元素添加overflow:hidden;
再添加zoom:1; 兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:100px; height:100px; background:#abcdef; float:left; border:1px solid; } .wrap{ overflow: hidden; zoom:1; } .clear{ clear:both; } </style> </head> <body> <div class="wrap"> <div class="box"></div> <div class="box"></div> </div> <div class="last"> last~ </div> </body> </html>
方法三：
使用css3的:after伪元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix{ zoom:1;/*兼容IE*/ } .clearfix:after{ content:''; display: block; height:0; visibility: hidden; clear:both; } .box{ width:100px; height:100px; background:#abcdef; float:left; border:1px solid; } </style> </head> <body> <div class="wrap clearfix"> <div class="box"></div> <div class="box"></div> </div> <div class="last"> last~ </div> </body> </html>
float完成导航案例演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*重置样式*/ *{margin:0;padding:0;} a{text-decoration: none;} ul{list-style:none;} /*基本样式*/ .header{ width:1120px; background:#ccc; margin:0 auto; overflow: hidden; zoom:1; padding:0 40px; } .logo{ float:left; width:100px; height:68px; } .nav{ float:right; overflow: hidden; zoom:1; } .nav li{ float: left; margin-right:20px; } .nav li a{ color:#333; display: block; height:68px; line-height:68px; } .nav li a:hover{ color:#fff; } </style> </head> <body> <div class="header"> <div class="logo"> <a href="#"><img src="cat-little.jpg" alt="logo"></a> </div> <ul class="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ul> </div> </body> </html>
