Float布局：盒子排序

上篇已介绍了float布局及清除浮动的方法

1. 已知：

        给盒子设置float后，盒子会变成行内块元素进行行排，如果一行放不下会掉到第二行

2. 问题：

        1. 既有左浮动盒子也有右浮动盒子时的排列情况

        2. 浮动盒子的高度不同时导致的错位情况

3. 示例：

• 子元素均左浮动
  • 现象：4、5落在第二行，并非紧挨着1、2
  • 解释：3号右侧放不下4、5考虑落到第二行，第二行的高度起点从第一行的最大高度处开始。
  • 方法：可以通过给1、2、3设置一个父元素div，并清除浮动，可看到第一行高度是被3撑开。

 图1

•  3右浮动，其他子元素左浮动
  • 现象：4、5落到第二行紧贴着1、2
  • 解释：左浮动的序列为：1、2、4、5，当3右浮动后，第一行剩余的空间放不下4、5，落到第二行。可以看出左序列和右序列互不干涉，但是在空间占用处在同一层面
  • 一般代码中既有左浮动又有右浮动时，选择先写右浮动，可以对齐，否则当一行内空间放不下右浮动元素时，导致盒子不对齐（如图3）。

 图2

 图3

•     子元素都左浮动，3加高加宽
  • 现象：第一行放不下3、4、5，掉到第二行，4右侧放不下5，5跟着4在3的右侧，
  • 问题：5应该掉到第三行紧贴3的左下角，但没有这样显示
  • 解释：float布局中当子元素盒子高度不一致时会导致“卡住”，4的右侧放不下5，5要掉的时候会先检查此行有没有高度能把他拦在这一层。

 图4

•     此例能更加形象解释float盒子的排列
  • 示例：都左浮动，2增加高度
  • 现象及解释：
    • 4：第一行3右侧放不下4，4应该掉到第二行，但前面2的高度拦住了4，4被卡在了第一行
    • 5：第一行放不下5，也没有能拦住它的元素，它的起始高度位置从第一行的最高处开始计算，即被拦住的4的底部。

4. 总结 

float布局：设置了float的元素会变成行内块元素，进行行排列，左右浮动是不同的序列，但是占用空间是同一层面，即不涉及空间放不下时，只在同一个序列中考虑元素位置问题。

 

  共勉