What is CSS Float? css float (Easy Explanation)

 What is CSS Float? css float (Easy Explanation)

What is CSS Float? css float (Easy Explanation)

Hey friends, today I'll explain all you need to know to start using a CSS Float. Before we dive in, i'll introduce myself. I'm CodingPorium and I make coding tutorials on YouTube and Instagram while providing FREE source code.

What is CSS Float? css float (Easy Explanation)

Basic Concepts

Okay, let's start now. What actually is a CSS Float? It's actually in the name itself. The float property can make an object to float or be placed at a certain position. This includes left, right or none. There are some cases where float will NOT WORK. We will look through it after we see how to use CSS Float.

There are 4 values for float. Let's see the first one.

1. float : none

The first float doesn't do anything much honestly. The only thing it does is NOT ACTIVATE THE FLOAT.  Here's how we can easily code float:none property.

<html>
<head>
<style>
.box {
  background:royalblue;
  float: none;
}
</style>
</head>
<body>
  <p><div class="box" style="width:170px;height:170px;margin-right:15px;"></div>
Insert random text here.</p>
</body>
</html>

The output of this code section would be:

What is CSS Float? css float (Easy Explanation)

2. float : left

This property is a common one. You may have seen articles,blog or mainly newspaper companies commonly using this technique. Here's how the output of this property looks like.

What is CSS Float? css float (Easy Explanation)

For this property, just use the same code earlier but change float:none to float:left

3. float : right

In this property, the output is similar to left float, but imagine if we change the direction by horizontally. The image below shows this well:

What is CSS Float? css float (Easy Explanation)

For this output, use float:right instead of float:left

4. float : inherit

This property resembles its name. This property makes the float inherit its original/default position which is float : none . The output is below:

What is CSS Float? css float (Easy Explanation)

The code is float:inherit for this property. The value of inherit can be used in many CSS properties. If you want an article on it, do comment it below.

Problems of float

Despite float being easy and nice to use, there are some problems to take note of.

  • Firstly, elements that have been given the absolute value in CSS , will IGNORE THE FLOAT PROPERTY if applied
  • Secondly, elements beside a float property element will flow together around it. To avoid this from happening, use the clear property
  • Browser Support: Most modern browsers do recognize and accept CSS Float but Internet Explorer does not recognize it well.

And that's all for CSS Float! Do check my out previous post on CSS Flexbox at here

Thank You!

Do contact me at codingporium.blogspot.com/p/contact.html . Do subscribe to my YouTube channel and do follow me on Instagram. I hope this post was useful and thanks to Code With Random and I hope to see you all in future posts. Goodbye!








Post a Comment

Previous Post Next Post