height:100px 是往下生长 ； -100px是往上生长的
font:12px/1.5 12px大小 1.5倍行高
width 需要设置宽度 这样才能居中显示
<html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> .header,.main,.footer{ width:500px; } .header,.footer{ height:100px; //盒子模型 要是不给height 高度 ；将不显示；只有设置高度才有图像出来 background:#000; } .main{ height: 300px; //内嵌的盒子 也不继承 height ,也需要独立设置高度 。 如果不给main height ，底部的块就直接顶上去 做不出来效果 background-color: #eee; margin:10px 0; } .main .content{ width:300px; height:300px; background:orange; float:left; } .main .sidebar{ width:190px; height:300px; background:green; float:right; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="content"></div> <div class="sidebar"></div> </div> <div class="footer"></div> </body> </html>
行元素没浮动之前 ，独占一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .header,.main,.footer{ width: 500px; } .header,.footer{ height: 100px; background:pink; } .main{ height: 300px; background-color: blue; } .content{ width:300px; height:300px; background:yellow; float:left; } .left , .right{ width:100px; height: 300px; } .left{ background-color: orange; float:left; //行元素没浮动之前 ，独占一行 } .right{ background-color: green; float:right; } .content-top,.content-bot{ height:150px; } .content-top{ background:#660000; } .content-bot{ background-color: #006688; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="left"></div> <div class="content"> <div class="content-top "></div> <div class="content-bot "></div> </div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
消除浮动
<html lang="en"> <head> <meta charset="utf-8"> <title>8.html</title> <style type="text/css"> .header,.main,.footer{ width:500px; } .header,.footer{ height:100px; background:#000; } .main{ /* height: 300px; */ //没有main作为占位大小 需要使用消除浮动办法不认底部顶上去 background-color: #eee; margin:10px 0; } .main .content{ width:300px; height:300px; background:orange; float:left; } .main .sidebar{ width:190px; height:300px; background:green; float:right; } </style> </head> <body> <div class="header"></div> <div class="main"> <div class="content"></div> <div class="sidebar"></div> <div style="clear:both;"></div> //消除浮动办法： 原理是 div clear:both 这个小的div 2px大小占位 </div> <div class="footer"></div> </body> </html>
第二种 ：消除浮动
★给父集元素使用overflow:hidden; bfc
如果有内容出了盒子，不能使用这个方法。
★伪元素清除浮动 推荐使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .header,.main,.footer{ width:500px; } .header,.footer{ height: 100px; background: #000; } .content{ width: 300px; height: 300px; background: orange; float: left; margin-top:-100px; } .sidebar{ width: 190px; height: 300px; background: green; float: right; } .main{ background: #eee; margin: 10px 0; /*overflow: hidden;*/ } .clearfix:after{ content: "."; display: block; height: 0; line-height: 0; visibility: hidden; clear:both; } /*兼容ie浏览器*/ .clearfix{ zoom:1; } </style> </head> <body> <div class="header"></div> <div class="main > <div class="content"></div> <div class="sidebar"></div> <!-- 额外标签法 --> <!-- <div style="clear:both;"></div> --> </div> <div class="footer"></div> </body> </html>