Быстрый сброс обтекания элементов со float'ом

O
На сайте с 29.05.2008
Offline
195
3376

Здравствуйте.

Наверное, каждый вебмастер, кой пытался верстать дизайны и странички сам сталкивался с подобной проблемой:

<div id="left" style="float: left; width: 50%;">Blah-Blah</div>

<div id="right" style="float:right.. >

<div class="im-footer">Footer</div>

В этом случае, в 50% footer прилипал к блокам выше.

Я думаю, вы поняли о чем я.

Раньше это решалось так: <div style="clear:both"></div>

Но сейчас есть более верный способ, кой экономичнее, семантические (в любом случае круче пустого div) и так же работает во всех браузерах. Итак:

for HTML4/xHTML:

<br clear="all">

for HTML5:

<br style="clear:both">

можно задать class/id.

Юзаем. Извиняюсь если глупо.. но подобные мелочи помогли мне сверстать дизайн, кой работает абсолютно корректно даже в IE5.5 :).

temniy
На сайте с 15.03.2008
Offline
257
#1

И в чем крутизна? Не говоря уж о том, что в отличие от пустого дива, ваш вариант переводит строку.

⭐ Лучший хостинг от 4 евро, VPS от 6 евро, VPN недорого - разные локации - любые карты - скидки до 20% - https://fornex.com/c/ffi2e3/ru/services/
[Удален]
#2

temniy, +1. глупость какая то

feelfree
На сайте с 12.07.2008
Offline
67
#3

крутость в более короткой записи.

Но тема баян.

даю 10% от оплаченного заказа *** тематика детские товары *** пишите в личку
LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#4

Шеф мы сэкономили 10 символов! Наш сайт грузится на 10 символов быстрее! Теперь это занимает, не 0.106668, а 0.106667 секунд!!!!

LEOnidUKG добавил 01.02.2011 в 01:33

абсолютно корректно даже в IE5.5

В чём?! В IE5? IE6 то уже хлам, все на IE7 и IE8 сидят, а кто не сидит, да пусть их винду съедят вирусы и украдут все WM (шучу конечно :D)

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
G
На сайте с 12.04.2008
Offline
101
#5

<br clear="all">

При использования в дивах размножающегося фона произойдет разрыв фона ( проверено ), поэтому для HTML 4 нужно использоваться <div style="clear:both"> так как в таком варианет не происходит разрыва и нет лишнего переноса строки.

Продажа сайтов (/ru/forum/866932) под Amazon и AdSense
S0
На сайте с 20.11.2010
Offline
32
#6
ortegas:

Но сейчас есть более верный способ, кой экономичнее, семантические (в любом случае круче пустого div) и так же работает во всех браузерах.

Сейчас есть? Вау! А мужики-то не знали, что еще в 1999 году этот ваш "новый" способ был признан устаревшим и не должен применяться в "чистом" (strict) HTML 4.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий