[Web Fundamentals] HTML FORMS & STYLING -  4.Free Account

[Web Fundamentals] HTML FORMS & STYLING - 4.Free Account

KristianZanev avatar KristianZanev 2 Точки

[Web Fundamentals] HTML FORMS & STYLING - 4.Free Account

https://codepen.io/dodospambot/pen/pwpPZo

Здравейте, проблемът ми е следния с конкретната задачка. В main елемента съм добавил 2 секции - лява и дясна, те съдържат input-и. И когато задам в CSS секциите да се display-ват като block, фонът на main елемента спира да обхваща секциите. Защо? Много лесно мога да оправя проблема като не ги правя block-oве и задам определен height на main и задачката ще добие желания вид, но смятам, че това е по-правилния вариант и не мога да си обясна защо не работи? Ще съм благодарен ако някой обърне внимание на въпросът ми.

Тагове:
-1
Web Basics 29/06/2017 21:02:20
idmitrov avatar idmitrov 55 Точки
Best Answer

Привет,

трябва ти следното:

main:after {
    content: '';
    display: block;
    clear: both;
}

 

Проблемът е, че след като си float-нал 2-те секции трябва след последната да clear-неш.Преди това се правеше с празен елемент, сега в css3 можеш да ползваш pseudo selectors, като :before и :after.

 

https://css-tricks.com/all-about-floats/

1
28/06/2017 20:53:04
KristianZanev avatar KristianZanev 2 Точки

Проработи, благодаря! Беше ми минало през ума, че е възможно да се оправи от clear float, но реших първо да опитам да float-на 2 празни  div тага с display-block в main и фона му си ги покриваше както си трябва.  Странно и за това реших, че проблема идва от някъде другаде. Все още не мога да си го обясня. Как точно clear float-a оправя проблема... 

0
idmitrov avatar idmitrov 55 Точки

Привет надявам се това да ти помогне да доизясниш нещата: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Това, което трябва да запомниш е, че след като float-неш даден елемент, си представи, че си го позиционирал абсолютно спрямо неговият parent т.е елементът вече не е wrap-нат в parent-a и за това не го разпъва с неговата височина. ако искаш да clear-неш parent ползваш pseudo selectors, ако искаш да clear-неш елемента до/преди него apply-ваш clear на даденият елемент.

 

0
28/06/2017 22:41:51
KristianZanev avatar KristianZanev 2 Точки

Да, стана ми по-ясно. Благодаря ти отново за отделеното време!

0