1.標准流(文檔流/普通流)排版
網頁默認的排版方式，及塊級元素,行內元素，行內塊級元素在網頁中的排版方式（塊級元素獨占一行，可以設置寬高/行內元素，行內塊級元素不獨占一行/行內元素不可以設置寬高/行內塊級元素可以設置寬高）
2.浮動流排版
由圖一變成圖二有兩種方法
1.把兩個方塊都變成行內塊級元素（css: display: inline-block;）,主要是二（用float標簽），既
<style type="text/css"> .box1{width: 100px;height: 100px;background-color: aqua; float: left; } .box2{width: 150px;height: 150px;background-color: brown; float: left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
注意點:
float的取值可以是（left/right/none），這是以網頁為基礎，會隨着窗口的變化而變化。
只有水平排版方式，沒有居中對齊。
在浮動流中是不可以使用margin:0 auto;
在浮動流中不區分塊級元素,行內元素，行內塊級元素（可以設置元素大小寬高，都可以水平排版）
浮動流中元素和標准流中的行內塊級元素很像
2.先浮動的元素會顯示在前面，后浮動的顯示在后面
<style type="text/css"> .box1{width: 50px;height: 50px;background-color: aqua; float: left; } .box2{width: 100px;height: 100px;background-color: brown; float: left; } .box3{width: 150px;height: 150px;background-color: chartreuse; float: left; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body>
3.當第一，三浮動，第二，四不浮動時，第二個為塊級元素，會和第二個獨占一行，第三，四個只能向下排
<style type="text/css"> .box1{width: 50px;height: 50px;background-color: aqua; float: left; } .box2{width: 100px;height: 100px;background-color: brown; } .box3{width:50px;height:50px;background-color: chartreuse; float: left; } .box4{width:100px;height:100px;background-color: coral; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body>
3.浮動元素的貼靠現象，當小盒子的累計寬度超過大盒子寬度時，小盒子會向上一級靠齊
<style type="text/css"> .box1{width: 300px;height: 300px;background-color: aqua; } .box2{width: 50px;height: 100px;background-color: brown; float: left; } .box3{width:100px;height:50px;background-color: chartreuse; float: left; } .box4{width:200px;height:100px;background-color: coral; float: left; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>
