浮動布局
阿新 • • 發佈：2017-09-04
文檔流 inline har tle lac flow ade spl overflow
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動</title> <style type="text/css"> *{ margin: 0; padding: 0; } header{ height: 150px; background: yellow; } nav{ height: 30px; background: green; } .main{ background: red; /*height: 500px;*/ margin: 0 auto; overflow: hidden; } /*兩列/三列布局*/ .left{ width: 200px; height: 300px; background: blue; /*display: inline-block;*/ float:left; /*脫離文檔流 的布局方式*/ } .right{ width: 800px; height: 500px; background: pink; float: left; /*display: inline-block; vertical-align: top;*/ } /*.a{ width: 200px; height: 300px; background: blue; float:right; }*/ .main{ width: 1000px; } footer{ height: 100px; background: gold; } /*多行多列布局*/ .box{ width: 240px; height: 100px; border: 1px black solid; float: left; margin: 10px; /*box-sizing: border-box;*/ } </style> </head> <body> <header></header> <nav></nav> <div class="main"> <div class="left"></div> <div class="right"> <div class="content"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </div> <footer></footer> </body> </html>
浮動布局