1. 程式人生 > >關於html中,巢狀多個盒子浮動的問題。

關於html中,巢狀多個盒子浮動的問題。

//貼上程式碼

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <style>             .box1{                     width:300px;                 height:300px;                 background-color: red;                 }             .box2{                 float:right;                 width: 200px;                 height:200px;                 background-color: green;             }             .box3{                 width:100px;                 height:100px;                 background-color: blue;             }         </style>     </head>     <body>         <div class="box1">             <div class="box2">                     <div class="box3">                 </div>             </div>             </div>             </body> </html>

結果如圖所示

 /*由此得出結論,當給box2設定右浮動時,box2裡面的box3盒子並不會繼承浮動屬性*/