Переваги використання display: inline-block vs float: зліва в CSS

Зазвичай, коли ми хочемо мати кілька DIVsпідряд, ми б використовували float: left, але тепер я виявив хитрістьdisplay:inline-block

Приклад посилання тут . Мені здається, display:inline-blockце кращий спосіб align DIVsпоспіль, але чи є недоліки? Чому цей підхід менш популярний, ніж floatфокус?

У трьох словах: inline-blockкраще.

Вбудований блок

Єдиний недолік display: inline-blockпідходу полягає в тому, що в IE7 і нижче елемент може відображатися лише в тому inline-blockвипадку, якщо він вже був inlineза замовчуванням. Це означає, що замість <div>елемента потрібно використовувати <span>елемент. Це насправді не є величезним недоліком, оскільки семантично <div>це розділення сторінки, а а <span>- лише для покриття прольоту сторінки, тому немає величезної семантичної різниці. Величезною перевагою display:inline-blockє те, що коли інші розробники підтримують ваш код у більш пізній момент, це набагато очевидніше, що display:inline-blockі text-align:right намагається зробити, ніж заява float:leftчи float:rightзаява. Моя улюблена користь від inline-blockпідходу полягає в тому, що він простий у використанні vertical-align: middle, line-heightіtext-align: centerідеально центрувати елементи інтуїтивно зрозумілим чином. У блозі Mozilla я знайшов чудову публікацію в блозі про те, як реалізувати крос-браузерний вбудований блок . Ось сумісність браузера .

Поплавок

Причина того, що використання floatметоду не підходить для компонування вашої сторінки, полягає в тому, що floatвластивість CSS спочатку була призначена лише для того, щоб обгорнути текст навколо зображення (стиль журналу) і, за задумом, не найкраще підходить для цілей загального розміщення сторінки. При подальшій зміні плаваючих елементів іноді виникнуть проблеми з позиціонуванням, оскільки вони не в потоці сторінки . Ще один недолік полягає в тому, що він, як правило, вимагає чіткого виправлення, інакше він може порушити аспекти сторінки. Очищення вимагає додавання елемента після плаваючих елементів, щоб не допустити згортання їх батьків навколо них, що перетинає семантичну лінію між розділенням стилю від вмісту і, таким чином, є антидіаграмою у веб-розробці .

Будь-які проблеми з пробілом, згадані у посиланні вище, легко можна виправити за допомогою white-spaceвластивості CSS.

Редагувати:

SitePoint - дуже надійне джерело для консультацій з веб-дизайну, і вони, схоже, мають таку саму думку, що і я:

Якщо ви не знайомі з макетами CSS, вам пробачать думати, що використання CSS-плавців у образних способах - це висота майстерності. Якщо ви спожили стільки навчальних посібників з компонування CSS, ви можете припустити, що освоєння плавців - це обряд проходження. Вас осліпить винахідливість, вражена складністю, і ви отримаєте відчуття досягнення, коли нарешті зрозумієте, як працюють поплавки.

Не обманюйте. Ти промиваєш мозок.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Оновлення 2015 року - Flexbox є хорошою альтернативою для сучасних браузерів :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Більше інформації

Оновлення 21 грудня 2016 року

Bootstrap 4 видаляє підтримку IE9, і, таким чином, позбавляється плавців з рядків і працює повний Flexbox.

Затягнути запит # 21389

Хоча я погоджуюся, що в цілому inline-blockкраще, є одна додаткова річ, яку слід врахувати, якщо ви використовуєте відсоткові ширини для створення чуйної сітки (або якщо ви хочете, щоб пікселі були ідеальними):

Якщо ви використовуєте inline-blockдля сіток загальною чи 100% шириною, вам потрібно переконатися, що розмітка HTML не містить пробілів між стовпцями .

З плавцями це не те, про що потрібно турбуватися - стовпці плавають над будь-яким пробілом чи іншим вмістом між стовпцями. Відповіді на це запитання містять кілька корисних порад щодо способів видалення пробілів HTML, не роблячи код некрасивим .

Якщо з будь-якої причини ви не можете керувати розміткою HTML (наприклад, обмежувальний CMS), ви можете спробувати описані тут трюки, або вам може знадобитися піти на компроміс і використовувати плавці замість вбудованого блоку. Існують також некрасиві фокуси CSS, які слід використовувати лише в екстремальних обставинах, наприклад, font-size:0;на контейнері стовпців, а потім повторно застосувати розмір шрифту в кожному стовпці .

Наприклад:

• Ось 3-колонкова сітка шириною 33,3% сfloat: left . Він "просто працює" (але для обгортки, яку потрібно очистити).
• Ось саме таку ж сітку, зinline-block . Пробіл між блоками створює простір фіксованої ширини, який виштовхує загальну ширину понад 100%, порушуючи макет і спричиняючи, що останній стовпець опускається вниз по лінії.
• Ось така ж сітка, inline-blockбез пробілів між стовпцями в HTML . Він знову "просто працює", але HTML - більш брудний, і ваша CMS може змусити якусь попередню обробку або відступ до його виводу HTML, що ускладнить це в реальності.

Якщо ви хочете divточно вирівняти піксель, використовуйте float. inline-blockЗдається, завжди вимагає відрізати кілька пікселів (принаймні в IE)

Ви можете глибоко знайти відповідь тут .

Але загалом з floatвами потрібно бути обізнаним і дбати про навколишні елементи та inline-blockпростий спосіб вирівнювати елементи.

Дякую

Існує одна характеристика вбудованого блоку, який може бути не прямим вперед. Тобто, значення за замовчуванням для вертикального вирівнювання в CSS є базовим. Це може спричинити деяку несподівану поведінку вирівнювання. Подивіться на цю статтю.

http://www.brunildo.org/test/inline-block.html

Натомість, коли ви робите float: зліва, діви не залежать один від одного, і ви можете легко вирівняти їх за допомогою поля.