The use of various devices for displaying information has led to the need for its adequate presentation without reference to specific modes, parameters and display conditions.
The previously popular ideas of block, tabular, rubber, adaptive (and other options) layouts are a thing of the past. In the present, information should simply be displayed as accessible, as possible, and equally on any device.
Simple information requirements
A person leads a dialogue in words, and they understand him. But he can use visual material and clarify what was said by gestures, drawings, terms, or otherwise focus the attention of the listener (consumer). As a result, he quickly reaches the goal.
The site is obliged to provide information in the same way, while there should not be any additional coding requirements at the level of HTML, CSS, JavaScript or PHP, in particular. The result should achieve 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 offset all differences.
CSS Tools
You do not always have to delve into HTML or CSS to achieve the desired effect. Often enough to use simple but effective means. Minimal costs in any business are a characteristic feature of modern information coding for its correct display.
In particular, the rules float and clear can be applied in HTML tags and CSS descriptions and do not require any additional costs, and the effect will be appropriate. The CSS clear rule, when used in an element, allows it to fit correctly, regardless of what size the display area is and on which device this process occurs.
CSS is not sophisticated designs and strives for the most affordable simplicity. Using the rule float: left or float: right in an element, you can press it to one side or another of the block around it, and the next element with a CSS rule is clear: both - place information around.
CSS clear rule use cases
There are three possible values for this rule:
- left - do not wrap around the left;
- right - do not wrap around the right;
- both - do not wrap around both sides.
You can also use the none and inherit values for the CSS clear rule, which is essentially the same as the functionality presented: the previous element (or elements) will not be wrapped around left, right, or on both sides. This is actually a line feed. All the following elements will appear in the next information block. What information will be displayed before the element with the CSS clear rule is determined by the developer. Elements with absolute positioning are formed on the page in the place set by their properties.
In fact, the CSS clear rule allows you to structure (group) information elements. The device displays information in a common stream, and when it detects a clear rule in an element, it displays its contents accordingly.
Application practice
As usually happened in other technologies, the described layout went through many stages and ultimately fell into two large categories:
- the ability to make beautiful and effective (but, possibly, for a long time);
- fast and affordable.
Each developer interprets what is said in his own way. Some have remained true to the terminology "adaptive layout". Others say they make rubber sites. Still others convince the customer of the need for block or table layout ... It doesn’t matter how to name the process, tool or other method for achieving the result.
Only development time and the result of work are always important. In the first case, using the CSS clear rule is unlikely to make sense, just as the float rule will disappear as unnecessary. To 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 to the HTML divs.
In the second case, thanks to the rules of float and clear, the CSS description allows you to simply form a stream of page elements. An acceptable result will be achieved quickly and efficiently.