[Web Fundamentals] HTML FORMS & STYLING - 4.Free Account - Софтуерен университет

KristianZanev 16 Точки

[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

28/06/2017 18:36:02 Web Basics 29/06/2017 21:02:20

Виж всички отговори

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/

28/06/2017 20:48:21 28/06/2017 20:53:04

KristianZanev 16 Точки

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

28/06/2017 22:26:28

idmitrov 55 Точки

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

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

28/06/2017 22:40:30 28/06/2017 22:41:51

KristianZanev 16 Точки

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

29/06/2017 19:54:00

Виж всички отговори