什么叫流體布局？
簡單的來說，就是網頁縮小和放大時網頁布局會隨着瀏覽器的大小而改變！
由於頁面中的寬度值都是百分數，所以拉伸、縮小瀏覽器的大小，布局的寬度會隨之變化兒不會出現橫向滾動條。這種布局叫做流體布局，可以增加文本的易讀性。
但是流體布局也有缺點。在窗口寬度小的時候，行變得非常窄，很難閱讀。在多列布局中尤其如此。並且，很多時候，會遇到文字溢出等情況！
舉個實例：三列布局（左右固定；中間自適應）效果如截圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .left{ width: 200px; height: 400px; background: plum; float: left; } .main{ margin-left: 220px; margin-right: 220px; height: 400px; background: powderblue; } .right{ width: 200px; height: 400px; background: greenyellow; float: right; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div> </body> </html>