Float is one of the basic functions of the CSS language (Cascading Style Sheets - formatting cascading tables). This language has existed since 1996 and still continues to evolve. Currently, developers are using the third version of CSS. Using the CSS programming language, it is possible to create a very beautiful and pleasant website that will not seem outdated or inconvenient for the user, even if JavaScript is not used at all. Modern features of the third version allow this to be done.
Also, developers can use more convenient formatting options, such as Flexbox or Position to change the place of an element on the site, but first things first. First you need to understand the advantages and disadvantages of the Float property.
CSS Float - why is it needed?
Float - property for positioning elements. Every day it can be seen on the pages of newspapers and magazines, looking at the pictures and text, which very neatly flows around them. In the world of HTML and CSS, the same thing should happen when using the Float function. But it is worth remembering that editing images is not always the main purpose of this function. It can be used to create a popular arrangement of site elements in two, three, four columns. In fact, the Float CSS property applies to almost any html element. Knowing the basics of editing the layout of elements using the Float function, and then Property, creating any website design will not be difficult.
Special typesetting programs may sometimes not notice images, but go on top of them. Quite similar things also happen in web design, only taking into account that the text, instead of climbing on the picture, is displayed (if the Float property is incorrectly applied) next to or below it, but always not where the developer needs it.
CSS Float Property Description
In fact, the ability to use the Float property is a very good ace up the sleeve for any web designer. But, unfortunately, a lack of understanding of how this function works can lead to collisions of site elements and other disappointments of this kind. Previously, similar situations also occurred due to bugs in browsers. Now the secret of how to use the Float property correctly will be revealed, and no more problems should arise with this.
The Float property has four values:
- Float: inherit;
- Float: right;
- Float: left;
- Float: none;
For those who know English, the values of the parameters of the Float property should be clear. But for those who do not know, a little explanation can be given. Parameter : left; moves the body of the element to the far left corner of the parent element. The same thing happens (only in the opposite direction) with the bcgjkmpjdfybb parameter : right; . Value : inherit; orders the element to take on the same settings as the parent. Such elements are also called children, since they are located directly inside the parent in the html code. A property : none; allows the element not to disturb the normal flow of the document, it is set by default for all parts of the code.
How does float work?
The Float CSS property works quite simply. Everything that was described above can be done without much difficulty. Then everything will be just as simple. But before continuing to study the properties of Float, it is worth a little understanding of the theory. Each element of a website is a block. It is easy to verify this by opening the console in Google Chrome by pressing Ctrl + Shift + J. Text, title, picture, links and all other components of the site will be displayed in blocks of simply different sizes. Initially, all of these blocks go one after another. As you can see in the example below, the lines of code go one after another, therefore they will be displayed strictly one after another.
This is called normal flow. With this flow, all the blocks fall on each other (without crossing the element bodies) vertically. Initially, all the contents of a web page are located in this way. But when using, for example, the properties of the CSS language Float Left, the element leaves its natural position on the page and moves to the leftmost position. Such behavior inevitably leads to a collision with those elements that have remained in the normal course.
In other words, the elements, instead of being arranged vertically, are now next to each other. If the parent element has enough space for it to be able to place two children inside itself, then there is no collision; if not, then overlapping one object with another is inevitable. This is extremely important to remember in order to understand how the CSS Float property works.
Clear function to solve problems
The Float function has a heart friend - Clear. Together they do not spill water. Both of these functions complement each other and make the developer happy. As mentioned above, neighboring elements go out of their normal flow and also begin to “float”, like the element to which the Float property was applied (for example, CSS Float Top). As a result, instead of one floating element, two are obtained, and not at all in the place where the developer intended to place them. From this moment, all the problems begin.
The Clear function has five values:
- : left;
- : right;
- : both;
- : inherit;
- none;
By analogy, you can understand when it is best to use the Clear function. If we have written a line in the code Float: right; (CSS code means), the function should be Clear: right;. The same thing swings with the properties of Float: left; complement it will be Clear: left; . When writing code Clear: both; it turns out that the element to which this function is applied will be below the elements to which the Float function is applied. Inherit takes the settings from the parent element, and none makes any changes to the site structure. If you understand how the Float and Clear functions work, you can write unique and unusual HTML and CSS Float code that will make your website one of a kind.
Using Float to Create Columns
The Float property is especially useful when creating columns on a site (or positioning CSS Float content in the center of a web page). Such a code is the most practical and convenient, so it’s worth considering several options for creating a familiar website template consisting of two columns. For example, let's take a standard website with content on the left, navigation bar (right), header and footer. The code will be like this:
Now you need to figure out what is written here. The parent element, which contains the bulk of the html code, is called a container. It allows you to prevent the elements to which the Float function is applied, scatter in different directions. If it weren’t, then these elements would float to the very borders of the browser.
Then, in the code are #content and #navigation. The Float function applies to these elements. #content goes to the left, and #navigation goes to the right. This is necessary to create a two-column website. Be sure to specify the width so that the objects do not overlap each other. Width can also be specified in percent. It’s even more convenient than in pixels. For example, 45% for #content and 45% for #navigation, and give the remaining 10% to the margin property.
The Clear property, which is located in #footer, does not allow the footer to follow #navigation and #content, but leaves it in the same place where it was located. What can happen? unless you specify the Clear property? In this code, #footer simply goes up and comes under #navigation. This will happen because #navigation has enough space to accommodate another element. This illustrative example shows very clearly how the Clear and Float properties complement each other.
Trouble Writing Code
The above examples are quite simple. But there may be problems with them. In general, in fact, many unexpected troubles can happen with the Float function. Strange as it may seem, problems usually arise not with CSS, but with html code. The place where the element with the Float function is located in the html code directly affects the operation of the latter. In order to avoid various kinds of difficulties, it is best to follow a simple rule - to place elements with the Float function first in the code. Almost always, this works and minimizes their unexpected behavior.
Clash of elements
Collision occurs when a parent containing multiple children cannot contain them all and overlap each other. It even happens that the elements may not be displayed, but disappear from the site. This is not a browser bug, but the expected and proper behavior of elements with the Float function.
Due to the fact that at first these elements are in normal flow, and then it is violated by the Float property, the browser can remove them from the site page. However, do not despair, because the solution is simple and clear - use the Cear property. Of all the ways out of this problem, it is possible that the use of Clear is the most effective.
But the problem of collision of web page elements can be solved in another way. There are at least two more ways:
- using the Position function;
- Flexbox application.
The Position function is sometimes a good alternative to CSS Float. In the center of the webpage, when using Position, it is best to position the images. If you correctly apply the values: absolute and: relative, then the elements will fall into place and will not overlap each other.
Parsing Position and Float Function Code
It is worthwhile to understand in more detail how to replace Float with Position and HTML code. Actually it is very simple. Suppose there is a #container and #div element.
#container {
width: 40%;
float: left;
margin: 10px;
}
#div {
width: 40%;
float: right;
margin: 10px;
}
#footer {
clear: both;
}
In this example, using the (CSS Div) Float function in the second container will help you create a standard two-column site. Never forget about the Clear function. Without it, only superposition of elements on each other will turn out.
So, how do you change the CSS and Float code to use Postion? Very simple:
#container {
width: 40%;
position: relative;
margin: 10px;
}
#div {
width: 40%;
position: relative;
margin: 10px;
}
In this case, #container and #div will take the position necessary for the developer in the parent element. The main thing? put #div and #container in one parent element that will fit their sizes.
Flexbox - how does this feature help replace CSS Float?
Flexbox is the most advanced way to create websites at the moment, so this feature is not supported by older browsers. This fact should not be discounted, because users with outdated versions of browsers will not be able to see the correct version of the site.
Flexbox is not a property, but a separate module. Therefore, flexbox supports a number of properties that work only with it. In addition, the display function, which has three parameters inline, block and inline-block in flexbox, has only one flex-flow.
How does flexbox work?
This technology will help the developer easily align the elements horizontally and vertically. Flexbox can also change the direction and display order of items. This technology has two axes: Main axis and Cross axis, around which the entire Flexbox is built. It also removes the effect of the Float and Clear functions. He builds his system in code, in which he uses properties unique to him, therefore, unfortunately, he will not be able to duplicate other properties in elements, such as Float and Position. And that would be very helpful, because, as mentioned above, Flexbox only works in newer versions of browsers.
It is worth remembering that in the end, Position, Flexbox and Float do the same thing - they create an unusual and original design for your site. Each of the options considered in the article does this in its own way and therefore has both advantages and disadvantages. In addition, it happens that somewhere the Float function will work fine (for example, in a site with a simple structure), but somewhere it is better to use Position or Flexbox.
Double margin bug
However, sometimes, unfortunately, each developer has problems associated not with the written code, but with bugs in a particular browser type. For example, in Internet Explorer there is a bug called Double Margin Bug. It multiplies the Margin parameter by two, which leads to the displacement of site elements beyond the boundaries of the browser. To avoid this, just specify the Margin parameter in percent. Usually this bug occurs when the value of the Margin and Float properties is the same.
#div {
float: left;
margin-left: 10px;
}
Such code will shift the element in Internet Explorer by 20 px to the left. You can change the code like this:
#div {
float: left;
margin-left: 10%;
}
or so
#div {
float: left;
margin-right: 10px;
}
Both of these options will solve the problem of displacement of elements.
Bugs of the browser and incorrect display of the site
It is worth remembering that Internet Explorer is not the only browser in which bugs can occur. Older versions of Google Chrome and Mozilla also incorrectly display some elements of modern websites. You can find a solution for each of these bugs. In general, I want to note that the use of Float will create an original and attractive site design. Understanding the basics and principles of this property will avoid errors and make life easier for any developer.