浮動貼邊原理 · css3

# 依次貼邊如果父盒子的寬度不足以存下所有的子盒子，存放不下的會自動向前尋找，直到剩余位置能夠存放，進行貼邊，從而進行貼邊顯示。如果父盒子的寬度不夠，子盒子會依次貼邊。 <h2>如果前面元素中，用空隙，當前貼邊的元素不會出現鉆空的現象，而只會查詢剩余寬度依次貼邊。</h2> 如果子盒子的寬度大于父盒子寬度，會有溢出狀態。 ![](https://img.kancloud.cn/6f/62/6f62ac090f69cbac2322cc41db9a1aa1_254x227.png) <p style="color:red">注意：貼的是圖上margin虛線的邊，如果沒有margin和padding屬性可以不計。</P> 代碼： ``` <style> *{ margin: 0; padding: 0; } div{ width:400px; height:400px; border:5px solid red; margin:100px auto; } div p{ width:100px; height:100px; float:left; } div p.par1{ height:200px; background:rgb(6, 216, 34); } div p.par2{ background:rgb(45, 6, 216); } div p.par3{ wdith:300px; background:rgb(231, 6, 212); } div p.par4{ width:300px; background:rgb(231, 134, 6); } </style> </head> <body> <div> <p class="par1">1</p> <p class="par2">2</p> <p class="par3">3</p> <p class="par4">4</p> </div> ``` ![](https://img.kancloud.cn/10/60/1060b706eb3ed5c5eef1e8e58c1b95a9_1186x838.png) ![](https://img.kancloud.cn/18/c5/18c561188d8efcc21e2e73fcc7e9b99e_1325x808.png)