独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Float or Flexbox

CODEX

Awhile back in my CSS Zen Garden experiment, I discovered the effortless magic of the CSS float property. It allowed me to put a block of text in the upper left corner so that it appeared nested as the main body sort of wrapped around it on the right and along the bottom.

In the header, floats also allowed me to put one image along the left side and another image along the right. This eliminated the need to deal with left and right margins and padding.

The float property was used 3 times in this initial version.

1/ IMG 1 => float: left;

2/ IMG 2 => float: right;

3/ summary => float: left;

Just some innocent CSS and all was well. Until I was informed that I should use Flexbox if at all possible and to avoid ever using floats. Well, darn.

1/ Flexbox Attempts
2/ What is a Float? And, how does it work?
3/ Floating Side-By-Side
4/ Clear The Floats
5/ The Many Problems With Floats

For my new re-design of the Zen Garden, I’ve done away with all 3 of the prior floats. Not because I was told to never use floats but, just because I want my elements to be more centered and spaced out.

The top <section> has a header, a div acting as my image placeholder and another div for a short summary.

First, I want to get these 3 elements positioned where I want them before I add the final styling and images. Not only do I want the elements centered horizontally on the page, I also want the text and images centered within their blocks.

This article from Free Code Camp looked promising…

Following the instructions in the section “How to Center a Div Horizontally with Flexbox,” I applied display:flex;and justify-content:center; to the CSS of the parent element (<section>).

Yikes! My 3 elements are now squished together side-by-side and I don’t know what to do with this.

Maybe it needs to be vertical? Scrolling down to the section “How to Center a Div Vertically with Flexbox,” I applied display:flex;and align-items:center;to the parent element (<section>).

Well… this isn’t quite what I wanted either.

Maybe I need to center it vertically and horizontally with Flexbox by combining the 2 methods?

Nope. It didn’t change a thing.

Maybe Flexbox isn’t right for this situation or I’m just not using it correctly.

Soon, I will dive deeper into Flexbox because it is the modern way to make responsive layouts.

For now, I’ll just revert to using basic properties such as text-align, padding and margin.

You have probably noticed that when you code a couple block elements, like <p>, <h1> and <div>, that they just stack on top of each other without any styling. This is how it “flows”. From top to bottom, one underneath the other.

To float an element, is to take it out of that “flow” and have it sit to the left or right of the page within its’ parent element.

The float property can have values of left, right or inherit.

Floating left will have the element float to the upper left and the following content will wrap around it on the right side.

Floating right will have the element float to the upper right and the following content will wrap around it on the left side.

Inherit means it inherits the float value of its’ parent element. The default value is none.

Floating will cause the following sibling elements to expand and or shift up to fill the space. It may also cause the floating element(s) to sit in front of other elements, blocking them from view.

To remedy this, the following elements either need to be floated as well to give an inline horizontal look. Or, they need to have a clear property telling it to not have anything to its left or right side, or both.

Imagine there are 4 <div> elements within a <section> element.

If all of the <div> elements are floated to the left, they will sequentially be pushed to the left one after the other.

Floating elements like this also works to create columns. Or, to float a sidebar alongside the main content.

If you float everything to the right, they will be ordered in reverse.

NOTE: If all of the child elements are floated, the parent element will collapse and potentially “disappear” from view because it no longer has anything to contain.

To avoid parent elements from collapsing and non-floated elements being pushed behind the floated ones, we can use a clear property.

The clear property can have a value of left, right or both. It indicates where floating elements are NOT allowed to float beside it.

A value of left means elements are not allowed on its left side.

A value of right means elements are not allowed on its right side.

Both means it cannot have elements on either side.

1/ Can add an extra empty element, such as a <footer> or <div>, after the floated elements and give it a clear property to “clear the floats” of the container.

OR, if you want to add a style attribute to the html…

By adding an element that is not allowed to have floated elements on either side of it at the bottom of the parent container, this encourages the parent to expand to contain it.

The downside to this is that you’re adding extra HTML to the page. If you have several containers with floated elements in them, you’re adding a lot of empty bulky HTML to the page which is generally a poor practice.

2/ A more popular way to clear floats is to add an overflow property to the parent of the floated element(s) so its’ height will expand to fit the floated element(s).

The overflow property indicates what to do with extra, the “overflow”, content inside an element.

It can have a value of hidden or auto.

Hidden means it will cut off, or hide, the extra content that would otherwise overflow the edges of the container. It maintains the original height of the parent container while constraining the contents within.

Auto means it will add scrollbars to the element.

Then, use the clear property and a bit of extra styling to this pseudo-element.

This clears the float and expands the parent to contain all the floated children elements.

Due to the nature of floats popping out of the flow of the page, you’ll have to style the elements around it to obtain the layout you want. Floats aren’t intended to manage the complete layout of a page. This is where Flexbox and Grid would be handy. Use floats sparingly

If one element is floated left and another is floated right, it may look alright at first. Then, resize the page and the spacing between the 2 changes as they can collide and overlap.

In regards to sizing, the child elements must be equal to or less than the width of the parent in order to float side by side. This also includes the margins and padding. If it all won’t fit together on one line then it won’t float next to it.

There are several more quirks about floats that I encourage you to read about if you do plan to use them (sparingly, of course).

Add a comment

What is your view?

Send

Related posts:

Satellite Imagery Analysis with Python

Oil is an area that concerns many nations and has been at the center of the storm for quite a long time. It isn’t easy to monitor the oil inventory around the world since nobody has a clear idea…

Why a Brand Needs to Communicate on Review Sites

Our life is influenced by the opinions of other people. We ask for advice when it comes to finding the dance classes in our area or choosing new headphones. The digital age has made Google searches…

Receita de Galette de Cogumelos

Misture as farinhas e o sal em uma tigela larga. Adicione a manteiga e vá misturando com a ponta dos dedos até que a manteiga tenha sido incorporada a farinha, mas ainda tenha alguns pedacinhos de…