HomeОбразованиеRelated VideosMore From: goto web

GoToWeb - Видеокурс Html и Css, урок 33, CSS-свойство float - обтекание элементов

32 ratings | 965 views
https://youtu.be/uZ3CG-EIK1o В видеоуроке рассмотрено свойства float и его применение для расположения элементов на странице, построения структурных сеток и т.д. Содержание видеоурока: 00:15 – поток документа. 01:40 – значение left свойства float. 02:40 – значение right свойства float. 02:53 – значение none свойства float. 03:05 – выпадение «зафлоченного» элемента из потока документа (что происходит при задании элементам свойства float). 06:50 – воздействие свойства float на блочные и строчные элементы. 12:00 – воздействие свойства float на следующие элементы в потоке. 13:25 – свойства clear - очистка потока от действия свойства float. 15:40 – примеры использования свойства float для расположения структурных блоков страницы. 20:20 – очистка потока при помощи «распорки» с использованием дополнительного элемента в потоке. 22:20 – очистка потока при помощи псевдоэлемента before. 26:20 – свойство float для построения сеток разметки.
Html code for embedding videos on your blog
Text Comments (10)
Автор умница. Понятно даже чайникам
Sv1nnet (7 months ago)
Невероятно большущее благодарю! Самый нужный задание по флоатам, какой я находил.
ArtyShock (8 months ago)
Большое благодарю создателю видео! Очень доходчиво. Но не считая того, лично от себя скажу, - у меня мышление ассоциативное, что-ли... мне необходимо созидать зрительно либо воображать зрительно момент, что бы его осознать. В других учебниках о потоке с моментом float: лишь теория, а ты показал будто это работает с различных углов-точек зрения. И я сейчас верно знаю что делает float: и когда его использовать. Вопрос уместно, а не хочешь ли ты испытать для записи видео-уроков использовать песочницу? Жсфидл либо кодпен отлично бы подошли. Спасибо!
Surkhay Hajinsberg (9 months ago)
Спасибо)
Aoxo name (10 months ago)
Обращение к создателю, будет ли это правильным? html: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <hr/> <header> <p>Шапка</p> </header> <article> <p>Новость</p> </article> <aside> <p>Боковая панель</p> </aside> <div id="rozd"></div> <footer> <p>Ботинок веб-сайта</p> </footer> </body> </html> Css: * { margin: 0px; padding: 0px; } body { font-size: 2em; font-family: Comic Sans MS; } header { width: calc(100% - 20px); height: 80px; background-color: #fff; border-bottom: 3px solid black ; border-top: 3px solid black ; padding: 10px; margin-bottom:20px; } article, aside { height: 400px; background-color: #f1f1f1; border-radius: 5px; border: 1px solid red; padding: 10px; -moz-box-sizing: border-box; /* Для Firefox */ box-sizing: border-box; /* Ширина блока с полями */ } article { width: 66%; margin-left: 2%; margin-right: 2%; float:left; } aside { width: 28%; float: left; } #rozd { clear: both; } footer { width: calc(100% - 20px); height: 80px; background-color: #fff; border-bottom: 3px solid black ; border-top: 3px solid black ; padding: 10px; margin-top: 10px; }
goto web (10 months ago)
Позвольте дать Вам рекомендацию на будущее по задаванию вопросов :) Целиком полный код не принято скидывать сплошным текстом. Никто не будет нянчиться с таким кодом - основывать папки с проектом, вставлять код в html и css файлы, чтобы проверить будто оно работает. Либо давайте ссылку на гитхаб, где выложен Ваш проект, или, если не умеете трудиться с гитом, заарживируйте папку с проектом, закиньте на какой-нибудь файлообменник и дайте ссылку на скачку. На последний случай (к примеру, если загрузка архива блокируются браузером в целях безопасности) - закиньте на файлообменник раздельно файлы проекта.
Aoxo name (10 months ago)
Очень потрясающее видео!! Реально посодействовал. Целый денек не мог осознать что такое float. Смотрел видео у Гоши Дударя, вообщем ничего неясно. А здесь 1 один поглядел и всё сходу стало ясно. Спасибо огромное
goto web (10 months ago)
Спасибо за оценку :)
Оксана Бон (1 year ago)
благодарю) выяснила больше чем желала)
goto web (1 year ago)
Пожалуйста :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.