浮动布局 · 前端

浮动布局主要采用 float 和 clear 两个属性来构建。 1.固定布局 ~~~html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> body { width: 960px; margin: 0 auto; font-size:30px; background-color: red; } header { height: 120px; background-color: blue; } aside { width: 200px; height: 500px; float: left; background-color: pink; } section { width: 760px; height: 500px; float: right; background-color: yellow; } footer { height: 120px; background-color: orange; clear: both; } </style> </head> <body> <header> header </header> <aside> aside </aside> <section> section </section> <footer> footer </footer> </body> </html> ~~~ ![](https://img.kancloud.cn/a1/f7/a1f7351f677c9085ded0c98b9a94320a_897x535.png) **2、流体布局** 流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20% 和 80%即可。 ~~~ body { width: auto; } aside { width: 20%; } section { width: 80%; } ~~~