CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)
HTML-код
- Опубликовано: 28 сен 2024
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/Yau...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...
Храни господь тех людей, которые придумали flex\grid ,Аминь.
👍
Ахаха, полностью согласен с автором коммента
Аминь, брат!
Оч. интересно. Посмотрел, кто ещё эту тему давал, Евгений всех превзошёл . Обычно сливают тему, либо минимум-минимум. Спасибо автору- Разобрался в основе.)
Спасибо за отзыв
автор молодец, все доходчиво и просто
Спасибо
мужик ты крутой
Спасибо)
Спасибо, самое подробное объяснение что я встречал.
Пожалуйста)
Так как же всё таки располагать эти блоки с учётом динамичности разрешения экранов ?
В идеале, лучше для вёрстки лэйаута использовать flexbox, или css-grid. Но если нужен float, то сначала идут плавающие блоки, потом обычный
Какую практическую проблему несет в себе схлопывание родительского контейнера? т.е почему float элементы не должны выпадать из контейнера?
Сразу видно, что вы не верстали используя float. Почему не должны выпадать? - посмотрите на grid и flexbox - любые изменения дочерних элементов не влияют на родителя (за исключением растягивания)
@@YauhenKavalchuk разумеется я не верстал на float,раз я смотрю про них видео в 2024д
Я знаю о грид и флекс,мой вопрос был в другом и он непосредственно касался тематики видео.
Немного не понятно, почему когда 1 и 2 стали float-елементами, т.е. документ перестал их видеть, они не перекрыли текст 3?
Пересмотрите самое начало. Тот момент «зачем именно были добавлены float элементы» и всё поймёте
Блоки не видят элементы, а контент видит
Максимально не понятная ерунда
В своё время это была крутая фича на подобии flexbox, или css grid
Блин,для меня флоаты,это,наверное,одно из самых сложных в css--
Не для вас одного. В своё время, это была одна из самых трудных тем.
сколько смотрел уроков про float, все дают минимум информации, (словно остерегаются вскипятить мозги слушателей), а ваш урок самый подробный, какой встречал, да к тому же укладывается менее, чем 10 минут. Это супер! Все понятно, и даже больше инфы, чем мне было это известно.
Спасибо
Spasibo bolshoe' bro !!
Пожалуйста)
Огромное спасибо за труды
Огромное спасибо за отзыв
Ну и бред этот float
Есть такое, поэтому это и устаревшая технология
Спасибо большое!
Пожалуйста
Для продвижения.
👍
Thank you!
You’re welcome
Спасибо за урок, но у меня есть некоторая проблема с флоатом, может ты встречался с такой ситуацией
ru.stackoverflow.com/questions/1229175
Ох, к сожалению не помогу, вёрсткой под FF уже не занимался очень давно
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
Отличное видео, но про clear осталось непонимание. Что значит очистка потока? Придется догуглиаатт
Очистка потока - это и есть добавление свойства clear на элемент
Отличный материал, но разве тут нет ошибки .wrapper:after (а где еще одно двоеточие?)
Ошибок нет, синтаксис с 1 двоеточием нормально поддерживается)
А если заменить в clearfix с display блока на таблицу?
Будет работать
Боже, спасибо за такое понятнейшее объяснение!!!
Спасибо за отзыв
Спасибо за урок. Однозначно лайк.
Благодарю
ничего не понял, спасибо
👍пожалуйста
Спасибо!
Пожалуйста
ок
Из-за таких «экспертов», как вы эти же самые джуниоры не могут пройти собеседование, потому что вы неадекватно воспринимаете информацию. Было сказано - float - это очень старый подход, который до сих пор можно встретить в legacy проектах. И любой веб-разработчик должен знать как с ним работать, что бы понимать поведение. В этом была основная мысль видео! А для современных проектов, и это тоже было сказано, нужно использовать либо flexbox, либо CSS Grid! Ушами нужно слушать, а не другим местом.
@@YauhenKavalchuk ок