0

.float, .inline {
  width: 100px;
  height: 100px;
  background: gray;
  margin-left: 5px;
}

.float {
  background: black;
  float: left
}

.inline {
  clear: both;
  display: inline-block;
}
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<br style="clear:both" />
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>

2
  • Как минимум в том, что при необходимости вы не сможете выровнять блоки с float по центру, используя text-align:center
    – Cheg
    20 июл 2017 в 20:26
  • Не на тех данных смотришь. ....... jsfiddle.net/zv51u79s - разницу видишь? 20 июл 2017 в 20:28

2 ответа 2

1

float используется для обтекания блока текстом или другими элементми, display: inline-block; делает елементи строчным но со свойствами блочного элемента, тоесть к inline-block можно пименить, width, height, margin Когда используют float то нужно использовать для остальных блоков в нужных случаях clear для того, чтоб убрать обтекание, float невозможно центрировать с помощью margin: 0 auto; text-alicn: center;

0

Разница в том, что это разные вещи.
Float - плавает и обтекается, а inline-block стоит в строке с текстом.

p { 
  border: 1px solid red;
  padding: 1em;
}
<p><img style="float:left" src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG">
Разница в том, что это разные вещи. Float - плавает и обтекается, а inline-block стоит в строке с текстом.

<p><img style="display:inline-block" src="//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG">
<!-- А ещё тут есть пробел! -->
Разница в том, что это разные вещи. Float - плавает и обтекается, а inline-block стоит в строке с текстом.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.