Introduction to CSS Floats. On the screen, I have a div with a class of floating that contains an image and a paragraph. In this div has a border so it could be seeing clearly on the screen. Currently, the image is stacked on top of the paragraph. And what I like to do is pull the image to one side of the div and have the paragraph on the other side beside the image. The image has a CSS class called image, and in the image CSS block, I'm going to add a float property and give it a value of right. And the image is pulled to the right of the div with the paragraph now to the left of the image. And I'm going to switch right to left and now the image is to the left and the paragraph is to the right of the image.

The CSS property float places an element on the right or left side of its container, allowing text in line elements to wrap around it. This changes the directional flow of the web page. Now, when using float, there could be some unintended changes to the design of the web page. The first issue is that the containing div is now smaller than its contents, and this can be seen by looking at the images boundary as it now goes beyond the border of the div. The other issue is that all elements after the floated element will be affected by the pull of the float. Even noticed my intention to have the paragraph be affected by the float. I'm going to use this element to demonstrate how to ignore the effect of the float.

The paragraph has a class of text. So, in the CSS panel, I will create a text class CSS block. And inside of the CSS block, I will add the CSS property clear. And clear is for clearing the float, and I will give this a value of left. Now, the paragraph is no longer acting like an in line element and it has dropped down to the next line, expanding the size of the container. Now, clear is directional and should match the direction of the float. So, if I change clear from left to right, it no longer works.

Hypothetically, what if I had another element after the paragraph that had a float value of right? There is an option for clear to clear both sides. So, I will change right to both. And because both covers both sides, this does work with regards to the left float. Now, I still want the paragraph to be in line with the image, but at the same time I don't want all these unintended consequences due to the use of floating. I'm going to implement what is known as the clear fix hack, and I'm using a slightly different approach. Typically this hack is done by creating a class called clear fix, but I'm going to apply this to the floating class instead.

I'm going to comment out the text CSS block and below that I will type .floating:after. After is a pseudo element that matches with a virtual last child element of the selected element. Virtual as in that the browser will act as if this element actually exists, but it does not, nor is it part of the dom. One other thing to note I wrote after with one colon. It could either be written with one or two colons and that depends on the version of CSS and text you wish to support and the browsers you are targeting. Older browsers will not support the two colon syntax, but that may not matter based on your client base.

Inside of the CSS block, I will type 'content' and I will give it a value of quotes signifying an empty string, display with a value of table, and clear with the value of both. Content allows you to insert cosmetic content to an element. Here, there's no need, we're using this as a fix to the float issue. Display table causes this element to behave like a table and clear is to clear the floats. As a reminder, this is a virtual element, but the CSS properties attached to it will have an effect on the page. Now, looking to the right, the div is its proper size, it's not distorted. The image fits correctly and the paragraph is in line with the image. So, the clear fix hack works, but I'm not going to dive into a deep discussion on how it works because surprisingly, there's a large and long historical perspective on the clear fix and its evolution, which is out of scope for this video. And that's it. Thanks for watching at Cloud Academy.