I got some CSS Questions

HTML-CSS
1

Hello,

I had questions after studying CSS and managed to awnser most of them but I am left with these five questions that I just cannot get, so I much appreciate any help :slight_smile:.

Here they are:

1 - I don’t understand the flex-basis property at all. From what they said,
I understand that max-width and flex-basis is the same thing, but I’m not sure that’s right.
(Link: https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-basis)

2 - I don’t understand “flex; 25%” in .column, is it just flex-basis that is used through the shorthand? (Link: https://www.w3schools.co/css/tryit.asp?filename=trycss3_flexbox_image_gallery)

3 - I heard that “float takes out the element out of the document’s flow”, What does it mean practically?

4 - I don’t understand the clearfix hack and overflow’s role in it AT ALL (Link: https://www.w3schools.com/css/css_float_clear.asp)

5 - I don’t understand how they used line-height trick to align vertically: https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height

6 - I don’t get how overflow: hidden does what it does (Link: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float)

Thank you,
-Tech

2

flex-basis means “ideal” size in certain settings, it by default acts as max-width but depending on value of flex-grow and flex-shrink can act differently as well

Yes, if it’s a width value then it’s a shorthand for flex-basis

This is exactly what it practically means. Document flow repeats the flow of the text, usually from left to right from top to bottom and all elements are placed according to this one-dimensional flow. If you want to stack elements on top of the flow (on beneath it) you need to take the element out of the flow.

If you take out of the flow more than one element and float them apart they still can overlap as “flow” rules stop applying once something out of flow. Clearfix introduces “flow” rules to out-of-flow floated elements.

*No one uses floats since CSS4 (> 5 years)

vertical-align is used on the inline element itself, in contrast to align-text that is used on the child element and it aligns element vertically within it’s line height. So if you set inline child’s line height to container’s height and do vertical-align: middle you’re vertically aligning child in relation to it’s parent container (something that was hard to do pre-CSS4 times)

*Same note applies

Overflow does what it says: hides anything inside the element that overflows its borders. When child element is out of flow it no longer respects parent dimensional constraints and can easily move outside parent borders. Parent has ability to hide from view anything that does it

3 Likes
3

Hello!

Thank you SO SO much for answering my questions!

A few things thought:

4 - Regarding the clearfix, they show 2 ways of doing it:

First one:
overflow: auto is supposed to add scrollbars, so I’m confused there? Why is that happening and what’s the logic behind it?

.clearfix {
  overflow: auto;
}

Second one:
Here, I just don’t understand anything of the code, what’s happening and the logic behind it.

.clearfix {
  content: "";
  clear: both;
  display: table;
}

6 - If you try taking out overflow: hidden; I don’t understand what happens and why it happens?

Thanks again,
-Tech

4

These two work in the same way as any value of overflow other than visible would fix the issue. Block elements without height must respect the height of content. Think of “respect” here as lazy algorithm and it goes something like this: “Ok I need to respect the text and there is no way I can avoid this, but I also have a float here and user allows me to overflow it, so fuck that!” - it’s literally what all lazy algorithms think. If you don’t allow to overflow, element must take floats into account, so as I said any value other than visible would work here. Now why, there’s no scroll? Because there is no fixed height of the parent - try to add one and you will see scroll. If element has no height then it presumes that it’s height is a height of it’s contents.

1 Like
5

Answering the second one. Now you see that “lazy” element would like to avoid calculating floats if you allow that. Clearfix comes to play when there are only floats in the container element and therefore height collapses to 0 - as it doesn’t have any in-flow elements inside it has to respect. So to fix it you need to add one such element of display: block (or table as in your example) as pseudo ::after element and place it beneath floats by clearing space in both directions

1 Like
6

Alrighty! Awesome :slight_smile: Thank you so much for your time! :smiley: