1.設置元素並列向左浮動 float:left;
2.設置元素並列向右浮動
如果僅僅設置float:right;元素會向右浮動，但是順序會改變。
解決辦法看代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多個元素浮動方向</title> <style> .container{ width:800px; height:300px; border:10px solid #ccc; } .main{ width:300px; height:100px; backgound-color:#ccc; float:right; } .box{ width:100px; height:100px; /* 向左浮動 文字方向1 2 3 */ /*float:left;*/ /* 向右浮動 文字方向 3 2 1 */ /*float:right;*/ /* 解決辦法 將所有需要浮動的元素放入一個邊框 設置邊框向右浮動,設置邊框內部向左浮動 注意：在設置邊框時，需設置父元素邊框的大小，否則父元素的大小未撐開,設置不起作用 */ float:left; } .box1{ background-color:yellow; } .box2{ background-color:deeppink; } .box3{ background-color:blue; } </style> </head> <body> <div class="container"> <div class="main"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </div> </body> </html>