In the world of web design, getting HTML elements positioned just right is always a point of concern. Sometimes that process goes just right with the perfect CSS and other times there is simply one element that refuses to go along with the rest.
Thankfully, there are CSS methods designed to help with matters like this. One of those options is the use of the “clearfix” property. This concept is called a hack in some circles and clever coding in others.
Whichever camp you may subscribe to, it is an effective tool designed to help with float elements. Specifically, those that are placed right next to each other on the HTML page. In this brief tutorial, you will learn how to use the clearfix property in CSS to handle situations like that.
Understanding When to Use the Clearfix Property
Getting right in the technical concepts, the clearfix property has a very specific use for a designer. When an HTML element is set to be “floated” on a page, it provides a sense of positioning in the website layout.
A floated element can be told to float left or right for example. This directional input informs the other HTML elements on how to interact with it. To better understand this and how the clearfix property will affect it, you can set up a sample HTML page to work on.
Sample code is provided below. You can follow along or build your own as well.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Practice</title> <link rel="stylesheet" href="CSSClearfix.CSS"> </head> <body> <h1>Udacity: CSS Clearfix Property</h1> <div id="div1">I am div number 1</div> <div id="div2">I am div number 2</div> </body> </html>
This should provide the following basic output on the HTML page.
With some basic CSS as shown below, the page will have the two divs highlighted.
#div1{ border-style: solid; border-color: black; border-width: 12px; } #div2{ border-style: solid; border-color: red; border-width: 12px; }
This gives you the following output.
To get a sense of how the float property can change appearance, a value of float left will be applied to the first div.
#div1{
border-style: solid;
border-color: black;
border-width: 12px;
float: left;
}This gives the following output.
As you can see, the first div is floating left. The second div now moves up to take the space left over from the first div. Now that you can see how the float property is affecting these simple elements, you can look at how the clear and clearfix properties work.
Using the Clear and Clearfix Properties
The Clear Property
Another positioning option is the clear property. This property affects the float concept by moving elements past it instead of having them move up to take the space available.
In this example CSS code, the clear property was set onto just the div 1 element.
#div1{
border-style: solid;
border-color: black;
border-width: 12px;
clear: left;
}This gives the following output on the HTML page.
Much like the starting example, the second div is under the first. The difference is that it is being told to move past that first div. Take a look at it again with more content added.
In the example below, sample text has been added with paragraph elements in between the divs.
<div id="div1">I am div number 1</div> <p>I am a string of sample text for this image.</p> <p>I am a string of sample text for this image.</p> <p>I am a string of sample text for this image.</p> <p>I am a string of sample text for this image.</p> <p>I am a string of sample text for this image.</p> <div id="div2">I am div number 2</div>
With the div 1 element set to a float value of left, the following output is seen.
Now, with the float property removed and the clear property added with a value of left, the output changes to this.
In the image above, you can see that the other elements were instructed by the CSS to stay clear of the div one element and move past it to positions below. Now that you can see how the clear property operates, it’s time to move on to the clearfix itself.
The Clearfix Solution (Hack)
The designed use for the clearfix hack deals with how one element sizes within another. There are many reasons and scenarios where this could be an issue. In each one, leaving it alone just won’t be an option.
Consider if you are working with a list of defined terms with images as examples set alongside them. If those images and their respective text are not aligned properly, you might end up with some confusing page design. This issue will compound itself with any complex CSS styling you may want to add as the page grows.
A way that designers can work around this issue is to use the “clearfix” method. Essentially, this is a way to use CSS properties to make the sizing issue. In the sample HTML code below, an image is added within the first div element.
<h1>Udacity: CSS Clearfix Property</h1> <div id="div1"> <h2>This is a sentence about rocks.</h2> <p>Look at that, an image of rocks right over there!</p> <img src="rocks2.jpg"> </div> <div id="div2">I am still div number 2</div> </body>
In the CSS, the image is floated right to show up as intended.
img{
float: right;
}Even though the image is being floated right, it still has position issues. With no styling applied, the rock image will sit outside the first div element and spill out onto the second div element.
To mitigate this effect, you can use the clearfix approach. The clearfix hack is not so much a property value as a collection of properties working together to create the desired outcome. The sample CSS code below shows another set of options added onto the div 1 element.
#div1::after{
content: "";
clear: both;
display: table;
}In the CSS code example, the clearfix solution is not simply a property you can call upon. Note that the “after” selector creates a pseudo-element that hits the last child of the target element. The “after” selector is key to the effects taking place.
The “content“ property is used to add content. In this case, it will be placed after the child element as the “after” selector was applied.
The “clear” property here is set to “both” indicating that it should be clear on both the left and right float points, moving past them.
The “display” property is set to “table” to use the structure format of an HTML table.
The end result of using this method creates the following output.
Clearfix Going Forward?
It’s important to remember that the Clearfix solution was created as a hack of sorts to handle a problem using floats in web design. That is not to say that the problem does not exist today or that it does not have its own merits in use.
However, it’s essential to take advantage of the progress made in modern layout designs. Options such as Flexbox and CSS Grid have allowed HTML pages to be both dynamic and less reliant on float heavy designs.
Adding into that forward-thinking is the use of the CSS display property value of “flow-root.” This allows a new block to be formed for the intended element with much less work. Of course, there might even be new options building on top of this for web designers in the coming year. It’s nice to have the old hacks to rely on, but it’s also great to be part of a community that keeps growing and advancing.
_______________________________________________________________________
Why stop at just CSS? The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
