【佈局】學習CSS佈局12——浮動佈局例子
阿新 • • 發佈：2018-12-01
完全使用 float 來實現頁面的佈局是很常見的。這裡有一個我之前用 position 實現的佈局例子，這次我使用 float 實現了它。
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}這個例子和之前那個外觀一模一樣。請注意我們在容器上做了“清除浮動”。原本在這個例子中是不需要的，但是當 nav 比非浮動的內容還要高時就需要了。
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .container { border:5px solid #6ac5ac; overflow:auto; } nav { float:left; width:200px; background-color: #d64087; } section { margin-left:200px; background-color: #fdc72f; } footer { background-color:#96c02e; } </style> </head> <body> <div class="container"> <nav> <ul> <li><a href="#">static</a></li> <li><a href="#">relative</a></li> <li><a href="#">fixed</a></li> <li><a href="#">absoluted</a></li> </ul> </nav> <section> 這個例子和之前那個外觀一模一樣。請注意我們在容器上做了“清除浮動”。原本在這個例子中是不需要的，但是當 nav 比非浮動的內容還要高時就需要了。 </section> <br /> <section> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. </section> <br /> <footer> </footer> </div> </body> </html>
效果圖如下：
