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

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

41 ratings | 1100 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 (11)
Ok Z (5 months ago)
Спасибо, наилучший задание по float, какой мне встречался. Жаль, что поздно отыскала, однако про чистку потока рассказываете попросту супер, в моей голове все совсем стало на пункт!
Автор умница. Понятно даже чайникам
Sv1nnet (1 year ago)
Невероятно большущее благодарю! Самый нужный задание по флоатам, какой я находил.
ArtyShock (1 year ago)
Большое благодарю создателю видео! Очень доходчиво. Но не считая того, лично от себя скажу, - у меня мышление ассоциативное, что-ли... мне необходимо созидать зрительно либо воображать зрительно момент, что бы его осознать. В других учебниках о потоке с моментом float: лишь теория, а ты показал будто это работает с различных углов-точек зрения. И я сейчас верно знаю что делает float: и когда его использовать. Вопрос уместно, а не хочешь ли ты испытать для записи видео-уроков использовать песочницу? Жсфидл либо кодпен отлично бы подошли. Спасибо!
Surkhay Hajinsberg (1 year ago)
Спасибо)
rela589n (1 year 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 (1 year ago)
Позвольте дать Вам рекомендацию на будущее по задаванию вопросов :) Целиком полный код не принято скидывать сплошным текстом. Никто не будет нянчиться с таким кодом - основывать папки с проектом, вставлять код в html и css файлы, чтобы проверить будто оно работает. Либо давайте ссылку на гитхаб, где выложен Ваш проект, или, если не умеете трудиться с гитом, заарживируйте папку с проектом, закиньте на какой-нибудь файлообменник и дайте ссылку на скачку. На последний случай (к примеру, если загрузка архива блокируются браузером в целях безопасности) - закиньте на файлообменник раздельно файлы проекта.
rela589n (1 year ago)
Очень потрясающее видео!! Реально посодействовал. Целый денек не мог осознать что такое float. Смотрел видео у Гоши Дударя, вообщем ничего неясно. А здесь 1 один поглядел и всё сходу стало ясно. Спасибо огромное
goto web (1 year 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.