Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use the clear attribute in CSS". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to use the clear attribute in CSS" can help you solve the problem.

Ingenious use of clear attribute in CSS

In DIV+CSS design web pages, it is often necessary to set multiple DIV to be arranged side by side, often using float:left or float:right, but the problem arises. When the total width of multiple DIV juxtaposed in front is less than 100%, the following DIV is likely to be raised up, on the same line as the juxtaposed DIV in the previous line, which is not the result we want. Using the Clear property is just enough to solve this problem, as described in the following reference help:

CSS clear attribute

Pictures and text elements appear in other elements, so they (pictures and text) can be called floating elements (floatingelement). Use the clear attribute so that other floating elements do not appear on the edge of the element.

Note: when this attribute is used with the "float" attribute, the result may not be satisfactory.

Inherited:No

Inheritance: none

Give an example

Untitled document .LeftText {margin:3px; float:left; height:180px; width:170px; border:1pxsolid#B1D1CE; background-color:#F3F3F3;} .FootText {height:180px;} .clear {clear:both;} Block 1 Block 2 Block 3

Code description:

If there is no Clear layer, "Block 3" will side by side with Block 2 on the same line.

After adding the Clear layer, the influence of the floating DIV above will be removed so that it does not affect the layout of the DIV below.

This is the end of the content about "how to use the clear attribute in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.