CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)

  Переглядів 18,864

webDev

webDev

3 роки тому

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ UKposts: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

КОМЕНТАРІ: 60
@user-dv3di4nv1b
@user-dv3di4nv1b 2 роки тому
Храни господь тех людей, которые придумали flex\grid ,Аминь.
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
👍
@mr.warpunch6007
@mr.warpunch6007 Рік тому
Ахаха, полностью согласен с автором коммента
@elenochka404
@elenochka404 8 місяців тому
Аминь, брат!
@shifronim8950
@shifronim8950 3 роки тому
Спасибо, самое подробное объяснение что я встречал.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста)
@EugenySubbotin
@EugenySubbotin Рік тому
сколько смотрел уроков про float, все дают минимум информации, (словно остерегаются вскипятить мозги слушателей), а ваш урок самый подробный, какой встречал, да к тому же укладывается менее, чем 10 минут. Это супер! Все понятно, и даже больше инфы, чем мне было это известно.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@Morantriol
@Morantriol 3 роки тому
Огромное спасибо за труды
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Огромное спасибо за отзыв
@h1d0ra64
@h1d0ra64 2 роки тому
Спасибо за урок. Однозначно лайк.
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Благодарю
@gritsienkooleg3447
@gritsienkooleg3447 Рік тому
Боже, спасибо за такое понятнейшее объяснение!!!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв
@nouchance
@nouchance 3 роки тому
Spasibo bolshoe' bro !!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста)
@olehyefimenko6693
@olehyefimenko6693 Рік тому
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@bogdownoff
@bogdownoff Рік тому
Оч. интересно. Посмотрел, кто ещё эту тему давал, Евгений всех превзошёл . Обычно сливают тему, либо минимум-минимум. Спасибо автору- Разобрался в основе.)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв
@Naiman_PvL
@Naiman_PvL Рік тому
автор молодец, все доходчиво и просто
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@TheTexPro
@TheTexPro 3 роки тому
Thank you!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
You’re welcome
@user-ln8fs4ik1v
@user-ln8fs4ik1v 7 місяців тому
Толковое и понятное объяснение, прям все понял на ура) Изучая эту тему и экспериментируя выяснил, что flex/grid чудесным образом ВИДЯТ float блоки)) И автоматически рассчитывают для них высоту и ширину) Так что можно просто добавить тот же Display:flex с нужным flex-direction разумеется, или display:grid к родительскому блоку, и вуаля, никакого схлопывания) С гридом проще, родительский блок в принципе никогда не схлопывается и не подстраивается под контент, но это уже нюанс, который легко можно подправить. Друзья, как можно больше практикуйтесь, это самый быстрый и верный способ стать отличным веб-программистом ;)
@YauhenKavalchuk
@YauhenKavalchuk 7 місяців тому
👍
@user-ir8nd6mj2b
@user-ir8nd6mj2b 2 місяці тому
Потому что flex/grid создают новый контекст форматирования) Но лучше вместо них для этого использовать display:flow-root (почему автор не рассказал об этом?), который как раз и был создан как замена clearfix'у
@annummirror794
@annummirror794 3 роки тому
мужик ты крутой
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо)
@netvoegoumadelo
@netvoegoumadelo Рік тому
Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-bp8ky1my4o
@user-bp8ky1my4o 3 роки тому
Так как же всё таки располагать эти блоки с учётом динамичности разрешения экранов ?
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
В идеале, лучше для вёрстки лэйаута использовать flexbox, или css-grid. Но если нужен float, то сначала идут плавающие блоки, потом обычный
@AndreyPlaksin114
@AndreyPlaksin114 3 роки тому
Отличное видео, но про clear осталось непонимание. Что значит очистка потока? Придется догуглиаатт
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Очистка потока - это и есть добавление свойства clear на элемент
@cozafoto
@cozafoto 3 роки тому
Отличный материал, но разве тут нет ошибки .wrapper:after (а где еще одно двоеточие?)
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Ошибок нет, синтаксис с 1 двоеточием нормально поддерживается)
@user-hy7yh6bq7d
@user-hy7yh6bq7d 2 роки тому
Немного не понятно, почему когда 1 и 2 стали float-елементами, т.е. документ перестал их видеть, они не перекрыли текст 3?
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Пересмотрите самое начало. Тот момент «зачем именно были добавлены float элементы» и всё поймёте
@user-hj8lk3ix9b
@user-hj8lk3ix9b Рік тому
Блоки не видят элементы, а контент видит
@Wufora
@Wufora Рік тому
А если заменить в clearfix с display блока на таблицу?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Будет работать
@none1307
@none1307 3 роки тому
Для продвижения.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
👍
@igorblagoy6718
@igorblagoy6718 3 місяці тому
Какую практическую проблему несет в себе схлопывание родительского контейнера? т.е почему float элементы не должны выпадать из контейнера?
@YauhenKavalchuk
@YauhenKavalchuk 3 місяці тому
Сразу видно, что вы не верстали используя float. Почему не должны выпадать? - посмотрите на grid и flexbox - любые изменения дочерних элементов не влияют на родителя (за исключением растягивания)
@igorblagoy6718
@igorblagoy6718 3 місяці тому
@@YauhenKavalchuk разумеется я не верстал на float,раз я смотрю про них видео в 2024д Я знаю о грид и флекс,мой вопрос был в другом и он непосредственно касался тематики видео.
@zmerz
@zmerz 3 роки тому
Блин,для меня флоаты,это,наверное,одно из самых сложных в css--
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Не для вас одного. В своё время, это была одна из самых трудных тем.
@RainbowJet1
@RainbowJet1 3 роки тому
Спасибо за урок, но у меня есть некоторая проблема с флоатом, может ты встречался с такой ситуацией ru.stackoverflow.com/questions/1229175
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Ох, к сожалению не помогу, вёрсткой под FF уже не занимался очень давно
@niqwer477
@niqwer477 Рік тому
ничего не понял, спасибо
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍пожалуйста
@Nikitosss91
@Nikitosss91 2 роки тому
Максимально не понятная ерунда
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
В своё время это была крутая фича на подобии flexbox, или css grid
@user-no7sl1yk3f
@user-no7sl1yk3f 3 місяці тому
Ну и бред этот float
@YauhenKavalchuk
@YauhenKavalchuk 3 місяці тому
Есть такое, поэтому это и устаревшая технология
@stepankovalevych1936
@stepankovalevych1936 3 роки тому
ок
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Из-за таких «экспертов», как вы эти же самые джуниоры не могут пройти собеседование, потому что вы неадекватно воспринимаете информацию. Было сказано - float - это очень старый подход, который до сих пор можно встретить в legacy проектах. И любой веб-разработчик должен знать как с ним работать, что бы понимать поведение. В этом была основная мысль видео! А для современных проектов, и это тоже было сказано, нужно использовать либо flexbox, либо CSS Grid! Ушами нужно слушать, а не другим местом.
@stepankovalevych1936
@stepankovalevych1936 3 роки тому
@@YauhenKavalchuk ок
CSS3 #10 Шрифты и текст (CSS Font & Text styles)
11:31
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн
Can You Draw The PERFECT Circle?
00:57
Stokes Twins
Переглядів 41 млн
😨Новая Война в GTA 5 Online #shorts
00:40
King Dm
Переглядів 1,7 млн
CSS3 #11 Границы и тени (Borders & Shadows)
9:57
webDev
Переглядів 16 тис.
CSS Grid, flexbox, float   в чем разница и как использовать  Практический пример
26:31
CSS Pseudo elements Before and After: Examples
11:55
Анна Блок
Переглядів 101 тис.
7. Float. HTML для JavaScript разработчиков
13:10
WebDev с нуля. Канал Алекса Лущенко
Переглядів 14 тис.
CSS3 #17 Трансформации (Transform)
9:01
webDev
Переглядів 17 тис.
CSS Grid Layout. Кроссбраузерность. Grid и Flex. Основные понятия.
6:58
Фрілансер по життю
Переглядів 205 тис.
LIVE - Парад Победы в Москве. 9 Мая 2024
2:27:56
AKIpress news
Переглядів 2,2 млн