浮动贴边原理 · 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)