float浮动元素性质

Posted 2020-12-31 feiyang-dabao

1.浮动的元素脱标

  简单理解为:浮动的元素脱离标准文档流，可以设置宽高，可以并排显示

2.浮动的元素无margin缺陷

  两个盒子之间的距离是两个margin之和

3.浮动的元素依次贴边显示

   

贴边顺序：父盒子内侧 ← 子盒子1 ← 子盒子2 ← 子盒子3 ← 子盒子4。。。。。

 

如果前一个盒子剩余的宽度不够，会再前一个贴边。

浮动的元素不会钻盒子：

4.浮动的元素让出标准流的位置

   理解：俩个同级的盒子，前面的盒子左浮动，后面的盒子不浮动。浮动的元素会让出标准流的位置。

5.子围效果

    理解：

俩个同级的盒子，前面的盒子左浮动，后面的盒子不浮动。不浮动的盒子里面的文字不会压盖住，会在浮动的盒子周围显示。