CSS Floats and Clears Tutorial for Beginners

Подписаться 317 тыс.

Просмотров 21 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this CSS floats and clears tutorial for beginners, you will learn what CSS floats and clears are and what they are used for. We will style a basic page layout to help learn about floats and clears.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Floats and Clears Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:26) Setup
(01:01) Create starting elements
(02:19) Styling the block class
(03:21) Normal page flow
(03:47) Floating the div
(04:22) Creating separation between float and text
(05:54) Adding a 2nd float element
(06:58) Clearing floats
(08:32) Floats inside container elements
(12:02) Float columns in legacy code
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
🔗 MDN - CSS Values and Units: developer.mozilla.org/en-US/d...
🔗 MDN - The Box Model: developer.mozilla.org/en-US/d...
🔗 MDN - Styling Lists: developer.mozilla.org/en-US/d...
🔗 MDN - Display Property: developer.mozilla.org/en-US/d...
🔗 MDN - Floats: developer.mozilla.org/en-US/d...
📚 Typography Resources:
🔗 MDN: Fundamental Text and Font Styling - developer.mozilla.org/en-US/d...
🔗 CSSFontStack.com: Websafe Fonts - www.cssfontstack.com/
🔗 MDN: Styling Links - developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the CSS Floats and Clears for Beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #floats #clears

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@DaveGrayTeachesCode 2 года назад

CSS Floats have been around for a long time. Before other methods were available, floats were often used to create columns on a page. That is no longer the case, but floats are still useful for their original purpose which is to float any element you desire to the left or right to allow the text content of your page to wrap around the floated element. If you are just getting started with CSS, I recommend going to the start of this CSS for Beginners playlist: ru-vid.com/group/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@camip1519 11 месяцев назад

the best series i found on youtube , great job!!!

@DaveGrayTeachesCode 11 месяцев назад

Glad you enjoy it!

@louiidelosreyes742 10 месяцев назад

Done watching again! Thank you Dave! :)

@jaffaji 2 года назад

Thank you Dave. I learnt more about floats!

@DaveGrayTeachesCode 2 года назад

You're welcome! 💯

@TravinskiyVladislav Год назад

Thank you, Dave

@user-hi2dn1zt8q Год назад

thank you so much dave you'r the best so for on youtube tutorials

@DaveGrayTeachesCode Год назад

You're very welcome!

@anthonygeoffrey8063 Год назад

Thank you so much sir the video was very helpful

@DaveGrayTeachesCode Год назад

You're welcome!

@msurabhi23 Год назад

Video 11:51 flow-root. That was something new that i learnt. I have been working in tech for so long. What seems legacy is perhaps some cases used everywhere, sadly! And that's what i thought was the only way. Thank you for this tutorial! Much needed

@DaveGrayTeachesCode Год назад

Glad it helped!

@sonamohialdin3376 Год назад

Amazing tutorial thank you

@DaveGrayTeachesCode Год назад

You're very welcome!

@lazarusrize 10 месяцев назад

Thanks!

@farazk9729 2 года назад

Hi Dave, I just finished watching your video on closures, and I just wanted to thank you. I had watched quite a few videos on the subject before, but yours was by far the best. Your delivery as a teacher, your pacing, your tone of voice, your attention to details, differentiating between closely related yet discrete/different concepts (e.g. closure vs lexical scope in this case) are all great. Thank you! Also, I have just found your channel (and subscribed), so I don't know much about the channel yet, but do you also do full courses on Udemy? Thanks, Faraz

@DaveGrayTeachesCode 2 года назад

You're welcome, Faraz! 🙏 I do not have Udemy courses yet. I do plan to release a premium course at some point.

@farazk9729 2 года назад

@@DaveGrayTeachesCode looking forward to it; currently going through every video on your channel; both the missus and myself are learning a lot. Thanks.

@ram_qr 2 месяца назад

flow-root!!! 🙆‍♂Thanks a lot!

@gottabepablo 11 месяцев назад

Hi Dave, excellent video and explanation. It really helped make a lot of sense of things regarding float. Question: Would overflow:hidden also wrap the floated div inside its container? How about applying clear:both to the second paragraph? Thanks in advance for your help!

@ahmad-murery 2 года назад

I really do remember all the headache using float/clear in the past 🤕 I also remember that we used the ::after pseudo element to apply clear:both on the last item/paragraph, and I just noticed how old I am 👴 Thanks Dave, you explained it very well,

@DaveGrayTeachesCode 2 года назад

Thanks, Ahmad! I am also glad the days of the clearfix are behind us! 💯🚀

@ahmad-murery 2 года назад

@@DaveGrayTeachesCode just like waking up from a bad dream Thanks to flex/grid

@pakzadhasan9553 Год назад

thanks

@DaveGrayTeachesCode Год назад

Welcome!

@abdomahmoud8769 2 года назад

11:00 we can put that clear div inside the section underneath the paragraph

@DaveGrayTeachesCode 2 года назад

Yes, we can. As mentioned and demonstrated earlier in the video, you see that solution in legacy code and it does work. The solution provided at 11:33 is considered to be the current and correct solution documented by MDN: developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats

@Yanimir Год назад

tnx

@DaveGrayTeachesCode Год назад

🙏

@vamsiiswarabhottla6513 2 года назад

Hi Dave, when I gave more content in the section the content coming under the float container what to do when that occurs

@DaveGrayTeachesCode 2 года назад

I am not sure what you are asking. You can clear a float in a variety of ways that I display in this video. What you do depends on your goal for the page.

@CTILET 2 года назад

Hi Dave! Thanks for a new video. I got a problem i try to make a respositive website and all items are perspective to the size of the screen(on original) but on mine it have fixed size. Thats why when i make the screen wider the items get smaler)) What should i learn not to do this mistakes?

@TriLiCiT 2 года назад

In your CSS, have you tried this * { padding: 0; margin: 0: box-sizing: border-box; body { min-height: 100vh; width: 100%; and make sure all your elements are within the body. Think of a "sandwhich" the body (or whatever syntax you prefer) is the bread and everthing in-between is the meats, cheese, ect

@TriLiCiT 2 года назад

I'd also highly recommend you don't use this way of styling Dave is teaching in the video. I'm sure he would agree however he's showing this in the event you ever come across this way of styling in your job or ect. But thats whats amazing about CSS, you do your styling however you please and ultimately end up with the same results however if you want to save yourself a lot of code and headache. i'd highly recommend you grasp "FLEX" or "GRID"

@DaveGrayTeachesCode 2 года назад

It sounds like you need a meta tag in your HTML header that starts like this:

@DaveGrayTeachesCode 2 года назад

This is a good start, and then width: 100% is not necessary although it will not hurt anything either. The body element is a block element and will expand to the width of the page by default.

@DaveGrayTeachesCode 2 года назад

Yes, I'm showing simple examples of how each concept works. I think you are suggesting I create classes in a project which is what I would mostly do. There is also the BEM naming convention which I often loosely follow. More on all of that including flex and grid to come. 💯🚀

@user-nd5ip8lg9z 8 месяцев назад

Why did you use vw for the height of the box? I thought vw units are only for the width and for the height is vh unit?

@DaveGrayTeachesCode 8 месяцев назад

Did you watch the video where I explain that or are you just looking at the resulting code? I do explain it in the video.

@patriciaksbr Год назад

Hi everyone! I used the element section, as shown in this lesson, and got this warning on w3 validator: "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections, or else use a div element instead for any cases where no heading is needed". Is there another element we can use instead of section? VS Code and w3 suggests using div but, in this case, there's already a div inside the supposed section element.

@DaveGrayTeachesCode Год назад

Please see my other reply on this topic - I think you posted the question on the next video in the series.

@patriciaksbr Год назад

@@DaveGrayTeachesCode Got it. Thank you, Dave! You're the best!

@GabrielSouza-yy2rq Год назад

👏👏

@shadabmt 2 года назад

In "Float Inside container element" I use just above the end of the which gives me the same result as overflow or display. Is it the wrong way to write?

@DaveGrayTeachesCode 2 года назад

It works concerning your question about the topic starting at 8:32. That said I mentioned earlier you see extra div elements with a clear in legacy code. As I mentioned at 11:33, the correct current way to solve this is with display: flow-root. All in all, the result is the same and this tutorial provides at least 3 ways of fixing the issue.

@shadabmt 2 года назад

@@DaveGrayTeachesCode Ok, I will follow the method as you mentioned. Thanks.