要实现的样子:
实现的样子:
清除浮动的实现不再是用父元素加高度的方式去实现的,而是用的隔墙法和overfllow:hidden结合的方式去实现的。
在css的设计中,层次很重要,一定要分好层。然后一层一层去实现。
overflow:hidden;除了可以防止后一组的元素去追前一组的元素之外,还可以使得父元素有高。
比如,在这次的小程序中,如果不加下面这句话,
本来应该在底部的深绿色的盒子就会跑到上面来,像下图这样:(因为深绿色的盒子没有浮动,因为main盒子里面的子元素都浮动了,所以main盒子就相当于没有高度,所以深绿色的盒子就上去了。)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 body{ 12 width:970px; 13 margin:0 auto; 14 } 15 .cl{ 16 clear:both; 17 } 18 .h10{ 19 height:10px; 20 } 21 .header{ 22 overflow:hidden; 23 } 24 .header .logo{ 25 float:left; 26 width:277px; 27 height:103px; 28 background-color: red; 29 } 30 .header .language{ 31 float:right; 32 width:137px; 33 height:49px; 34 background-color: lightgreen; 35 margin-bottom: 8px; 36 } 37 .header .nav{ 38 float:right; 39 width:679px; 40 height:46px; 41 background-color: lightgreen; 42 } 43 .content{ 44 45 } 46 .content .banner{ 47 float:left; 48 width:310px; 49 height:435px; 50 background-color: orange; 51 margin-right: 10px; 52 } 53 .content .rightpart{ 54 float:left; 55 width:650px; 56 } 57 .content .rightpart .main{ 58 overflow: hidden; 59 } 60 /* 在rightpart这个盒子里就一组浮动的元素,所以不用考虑清除浮动 */ 61 .content .rightpart .main .news{ 62 float:left; 63 width:450px; 64 margin-right:10px; 65 } 66 .content .rightpart .main .news .news1{ 67 width:450px; 68 height:240px; 69 background-color: skyblue; 70 margin-bottom: 10px; 71 } 72 .content .rightpart .main .news .news2{ 73 width:450px; 74 height:110px; 75 background-color: skyblue; 76 margin-bottom:10px; 77 } 78 .content .rightpart .main .news .news3{ 79 width:450px; 80 height:30px; 81 background-color: skyblue; 82 } 83 .content .rightpart .main .hotpic{ 84 float:right; 85 width:190px; 86 height:400px; 87 background-color: purple; 88 } 89 .content .rightpart .links{ 90 width:650px; 91 height:25px; 92 background-color: green; 93 margin-top: 10px; 94 } 95 .footer{ 96 width:970px; 97 height:35px; 98 background-color: darkblue; 99 } 100 </style> 101 </head> 102 <body> 103 <div class="header"> 104 <div class="logo">logo</div> 105 <div class="language">语言选择</div> 106 <div class="nav">导航条</div> 107 </div> 108 <div class="cl h10"></div> 109 <div class="content"> 110 <div class="banner">大广告</div> 111 <div class="rightpart"> 112 <div class="main"> 113 <div class="news"> 114 <div class="news1"></div> 115 <div class="news2"></div> 116 <div class="news3"></div> 117 </div> 118 <div class="hotpic">热点</div> 119 </div> 120 <div class="links">链接</div> 121 </div> 122 </div> 123 <div class="cl h10"></div> 124 <div class="footer"> 125 126 </div> 127 </body> 128 </html>