Разница inline-block и float

1. Что будет, если контейнеру UL поставить рамку border?
2. Что будет, если элементы LI различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?
3. Как будут вести себя блоки, находящиеся под галереей?

Разница колоссальная.

В первую очередь она в том, что inline-block продолжают участвовать в потоке, а float — нет.

Ответы на вопросы по примеру:

Что будет, если контейнеру UL поставить рамку border?

Контейнер не выделяет пространтво под float. А больше там ничего нет. В результате он просто сожмётся в одну линию сверху.

А в случае с inline-block всё будет хорошо.

Что будет, если элементы LI различаются по размеру? Будут ли они корректно перенесены на новую строку в обоих случаях?

При float:left элементы двигаются направо до тех пор, пока не наткнутся на границу внешнего блока (с учётом padding) или на другой float-элемент.

Может получиться вот так (можно увидеть, изменяя размера окна этой страницы):

При использовании inline-block таких странностей не будет, блоки перенесутся корректно на новую строку. И, кроме того, можно выровнять элементы по высоте при помощи li { vertical-align:middle }:

Открыть в новом окне Открыть в песочнице

Как будут вести себя блоки, находящиеся под галереей?

В случае с float нужно добавить clear, чтобы поведение было идентично обычному блоку.