Applying the CSS clear rule: simple and convenient

Using a variety of devices to display information led to the need for its adequate representation without reference to specific modes, parameters and display conditions.

Popular earlier ideas block, tabular, rubber, adaptive (and other options) layouts are a thing of the past. In the present, information should simply be displayed as much as possible, qualitatively and equally on any device.

Simple requirements for the provision of information

A person conducts a dialogue with words, and they understand it. But he can use visual material and clarify what has been said by gestures, drawings, terms, or otherwise accentuate the listener's (consumer's) attention. As a result, he quickly reaches the goal.

The site is obliged to provide information similarly, and there should not be any additional requirements for encoding at the level of HTML, CSS, JavaScript or PHP, in particular. The result should reach the goal and be provided both on a personal computer, and on any other mobile or stationary device.

Hypertext languages are used not only by browsers, but also by other tools. The provision of information should eliminate all differences that exist.

Tools provided by CSS

Do not always go deep into HTML or CSS to achieve the desired effect. It is often enough to use simple but effective means. The minimum costs in any business are a characteristic feature of modern coding of information for its correct display.

In particular, float and clear rules can be applied in HTML tags and CSS descriptions and will not require any additional costs, and the effect will be appropriate. The CSS clear rule, when used in an element, allows it to reside correctly, regardless of the size of the display area and what device it is on.

CSS does not differ in the sophistication of designs and strives for maximum simplicity. Using the float: left or float: right rule in the element, you can press it to either side of the box around it, and the next element with the CSS rule is clear: both - place the information around.

How to use the CSS clear

There are three possible values for this rule:

• Left - do not wrap around left;
• Right - do not wrap around on the right;
• Both - do not wrap around on both sides.

You can also use the none and inherit values for the CSS clear rule, which is essentially the same as the functionality: the previous element (or elements) will not be wrapped around the left, right, or both sides. This is actually a line feed. All of the following elements will be in the next information block. What information will be displayed before the element with the CSS rule clear - defines the developer. Elements with absolute positioning are formed on the page in a place established by their properties.

In fact, the CSS clear rule allows you to structure (group) information elements. The device displays information by a common thread, and when it finds a clear rule in an element, it displays its contents accordingly.

Practice of application

As it usually happened in other technologies, the described layout has gone through many stages and eventually divided into two broad categories:

• The opportunity to do nicely and effectively (but perhaps for a long time);
• Fast and affordable.

Each developer interprets what he said in his own way. Some remained true to the terminology "adaptive layout". Others say that they make rubber sites. Still others convince the customer of the need for block or table layout ... It is not important how to name the process, tool or other method of achieving the result.

Always only the development time and the result of the work are important. In the first case, using the CSS clear rule is unlikely to make sense, nor will the float rule disappear as unnecessary. Create a page, post information and take into account the features of various devices will be a sophisticated algorithm in JavaScript or a combination of CSS styles, closely linked with the HTML divas.

In the second case, thanks to the rules float and clear, the CSS description allows you to simply generate a stream of page elements. An acceptable result will be achieved quickly and effectively.