Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS clear:both removal float how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that everyone after reading this CSS clear:both clearance float how to use the article will have a harvest, let's take a look at it.

First of all, you should be aware of some of the characteristics of floating float. If you set a float for an element, the element is equivalent to a block-level element, and you can set its width and height; floating takes the element behind it out of the standard flow; if all the child elements in the parent element are floating elements, the parent element is highly adaptive.

1. CSSclear attribute

Attribute value:

None: allows floating objects on both sides

Both: floating objects are not allowed

Left: floating objects are not allowed on the left

Right: floating objects are not allowed on the right

Demonstration of writing: # box {clear:both/left/right/none}

2. Clear:both clears the applicable scenarios for floating

In the page layout, after the use of floats, resulting in page typesetting confusion, we usually use clear:both to clear floats. To take a common example, there are two small boxes in a big box, the big box does not set the height, and the cssfloat style is used for the small box, then the background or frame of the big box can not be displayed properly, then we need to use clear:both to clear the float and make the page back to normal.

3. Application examples of clear:both.

Description: set the length of the outside big box to 500px, do not give him height, let it prop up on its own, its border (cssborder) is red, the background (cssbackground) is pink. There are two small boxes inside the big box, one setting float:right, the other setting float:left, the background color is green, the width is 200px, the height is 150px. Next, let's take a look at the effect of floating. The code is as follows:

HTML section:

Left floating left

Right floating right

CSS section:

.box {width:500px;background:pink;border:1pxsolid#F00;padding:5px;}

.left, .right {background:#008000;width:200px;height:150px;}

.left {float:left;}

.right {float:right;}

Effect picture:

Clear1.jpg

Two small boxes show the effect we want, one floating on the left and one floating on the right, but our big box is not opened, this phenomenon is caused by floating. Next, clear the float with clear:both to see if the big box can be stretched open.

We add an empty div in front of the label of the big box (div as the last subbox of the big box), and add the CSS style, clear:both, to the empty div, as follows:

HTML section:

Left floating left

Right floating right

CSS section:

.box {width:500px;background:pink;border:1pxsolid#F00;padding:5px;}

.left, .right {background:#008000;width:200px;height:150px;}

.left {float:left;}

.right {float:right;}

.clear {clear:both;}

This is the end of the article on "how to use CSS's clear:both cleanup floats". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use the clear:both removal float of CSS". If you want to learn more, you are welcome to follow the industry information channel.

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.