[CSS] Всичко за Float пропъртито


27

Колега искам да споделя с вас тази статия за това как, кога и защо да използваме Float в нашия CSS.

Статия




Отговори



3
Браво супер статия!Определено float и свързаните с него clear-и е проблемен материал за начинаещите.
Keep up the good work, mate!

от baretata (934 точки)


4
Почти не го използвам и смятам, че не е добра практика поне за мен.
Предпочитам display:inline-block;
В определени случаи, ако няма друг начин, естествено се ползва, но това е много рядко.



7
Ако има някой, който все още се затруднява с цялата магия около float-а и техниките за clear-ването му, ето това видео ще му е доста полезно - https://www.youtube.com/watch?v=IiJzbXzOdHQ

от Matrix (2857 точки)


5
Здравейте колеги,
питах трейнерите специално за float property-то дали ни е нужно за изпита или можем да го заместим с display:inline-block. Тъй като аз в практиката гледам максимално да отбягвам float и винаги да използвам inline-block. Отговорът беше, че всички неща, които могат да се направят с inline-block могат да се направят и със float, но обратното не важи. И че на изпита може би ще има нещо, което да е възможно само чрез използването на float.
Затова по - добре всички да прочетем повечко за float-a, защото се оказва, че е важен :)

от tddhome (3086 точки)


0
Мхм, важен си е та и на моменти бая тегав, то ако имаше начини тотално да се замести, вероятно досега да е забравен, ама на... :)

от Matrix (2857 точки)

0
Ако имаш хоризонтално меню е по-добре да го направиш с float. Защото с inline-block остават бели пространства между li-тата. И това се оправя, само ако разместиш html-a. Което на изпита не върши работа.

от ivan.mihov1 (4988 точки)


6

 Най-кофтито при float, е че родителския елемент на float-натия се свива. Тогава за да запазим нормалните размери на родителя му даваме clearfix(свиването се получава тъй като ако флоатнем елемент, родителя се държи все едно флоатнатия му наследник не съществува). 

 Друг момент при float-овете е, че ако искаме да свалим елемент(примерно footer) под float-нат елемент трябва на footer да дадем clear:both/right/left.

 Ако искаме да float-нем два елемента един под друг, например вдясно, на двата даваме float:right, а на долния - clear:right .

 Дотук нещата са прости. Но идва един неприятен момент-когато имаме един float-нат елемент и в него контейнер с друг float-нат. Ако например в aside, флоат-нат вляво имаме контейнер, и в контейнера картинка флоат-ната вляво, контейнера ще се свие. И трябва да направим clearfix на контейнера, нали? Да ама тогава ще има изненада..вътрешния контейнер ще се разпъне до дъното на външния флоат-нат елемент. Това става, защото като дадем на нещо clear:left то зачиства всички леви float-ове по страницата. 

Смятам, че това е всичко за float, ще се радвам ако някой добави нещо. Весели празници


от ivan.mihov1 (4988 точки)


3

Проблема с родителския елемент може да се реши и по други начини:

1-ви - слагаш на родителя display: inline-block 

2-ри - слагаш му overflow: hidden

Може и тези начини да не са правилни, но според мен работят.


от dimo.petrof (2887 точки)


0
Наистина, дори и само overflow:hidden да дадеш на родителя свиването се оправя. Имаш 1+ от мен, не го знаех. Дали обаче това не се чупи някъде, тъй като препоръчват clearfix, което си е 4 реда повече код....

от ivan.mihov1 (4988 точки)

0
4 реда повече код не са нищо, ако clearFix-а ти върши работа, слагай си го. Така или иначе предполагам всеки за изпита си е подготвил едно текстово файлче с Clearfix() примерно и reset някакъв, а и други често използвани неща.

от dimo.petrof (2887 точки)



1

Още един начин за решаване на проблема с родителския елемент, който е НЕпрепоръчителен:

Накрая, след последния флоутнат елемент се добавя един празен, на който му е зададен и някакъв клас, например <br class="clearBoth">. В .css файла се задава на класа .clearBoth{

clear:both;

}

Не е правилно, тъй като се добавя излишен код в html файла, но работи и за протокола нека да го има.


от plamenti (534 точки)


0
И в статията, и във видеото показани по-горе е споменат този медот. И все пак е казано, че по-подходящо е да се ползва
вместо
:)

от bonethugs (378 точки)

0
Така е, съгласен съм. За да го разбереш обаче, трябва да изгледаш видеото и да изчетеш статията! Някой може да няма време, нерви, ресурс и т.н., за това е готино да има някъде извлечена сентенцията на нещата. И аз имам на компа видеа, които са по 4-5 и повече часа... Но реално важното може да се каже за минути. А който се интересува от подробностите, ще задълбае! Аз също разчитам на колеги, които са положили къртовски труд, вложили са много време и усилия, за да разберат нещо важно и в последствие да го споделят - по-простичко, по-синтезирано и по-приложимо. Културата на споделяне... това рулира. Ако не беше такава по своята същност, нямаше да го има и това уникално явление - Telerk Academy!

от plamenti (534 точки)



3

Признавам си, че бях позабравил разликата между Absolute и Relative позиционирането и това кратко видео, на което се натъкнах много бързо и готино обяснява разликата между двете, споделям ви го -  https://www.youtube.com/watch?v=aFtByxWjfLY


от Matrix (2857 точки)


0
Наистина добро видео, относно relative и absolute позиционирането.

от teleriknetwork (2734 точки)