the clearfix

Welcome to the world in which I, your friendly knitting blog host, have been overdosing on html, CSS, and Javascript. It’s a strange world, full of div tags and octothorps (that’s a # sign – but octothorp is more fun to say, right? Almost like a comic book villain).

As a lifelong lover of the semi-colon, JavaScript makes me happy. I hope you don’t mind if I drop a few technical notes in here and there on this fiber-based blog. Particularly since I’m considering a career change into technical writing, I’d love to start practicing now (and not just in the realm of knitting patterns, which are definitely a form of technical writing!).

Let’s start with a handy-dandy way to keep floated elements from collapsing into each other and overflowing while you’re doing a web page layout. (If you have no idea what I’m talking about, the tl;dr is: web pages use secret behind-the-scenes boxes to create a pretty website, and sometimes the boxes overlap when you don’t want them to and then it looks ugly. )

Some Googling leads me to believe that there are a million and a half ways to solve the problem. Here’s the simplest one I can find that’s been working for me on my practice sites, on browsers back to IE8. It’s a two-step process.

1. In your CSS, create a new rule targeting a class. You can call your class whatever, obviously, but .clearfix and .group are the two most commonly used monikers for this fix. For others reading your code, .clearfix is probably the most readable.

.clearfix::after {
content: “”;
display: table;
clear: both;

2. In your HMTL, assign class “clearfix” to the parent class of your problem children. In my case, I had a wrapper div. Like this:

<div class =”clearfix”>

Because the clearfix is a class, you can assign it to as many elements in your website as you need to. Enjoy all the new pretty options that are open to you! Also, if you know about pseudo-elements (apparently that is what the double colon in “clearfix::after” means, please enlighten me!

mackenzie on pinterestmackenzie on instagram
My training as an artist encourages me to see knitting as a canvas for all kinds of surface design, so I'm teaching myself to grade patterns and hope to release my first collection soon. I'm currently raising a Little One, and working knitting in wherever it fits!

One thought on “the clearfix”

  1. Your photo says it all. I don’t understand a word of this post, but when I read my first knitting pattern I didn’t understand a word of that either. I guess that means that venturing into new worlds can sometimes be a bit confusing but perseverance and a “no fear” attitude will bring about success.

Comments are closed.