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

In this issue, the editor will bring you about how to call clear:both to clear the float. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Focus on the use of clear:both clear floats. In CSS, we often use the "clear float" Clear. Typically, the value of this property indicates that floating objects are not allowed. This property is used to control the physical location of the float property in the document stream.

Clear floats with clear:both

In CSS, we often use "clear floating" Clear, which is typical of clear:both.

The CSS manual states that the value of this attribute indicates that edges with floating objects are not allowed. This property is used to control the physical location of the float property in the document stream.

◆ when the property is set float (floating), its physical location has been separated from the document stream, but most of the time we want the document stream to recognize float (floating), or hope that the elements after float (floating) will not be affected by float (floating), then we need to use clear:both; to clear.

Viewplaincopytoclipboardprint?

This is the first column, p > this is the second column, p >

This is the third column. P > this is the first column, p > this is the second column, p >

This is the third column. P >

If you don't need to clear floats, then the third column text will be along with the first and second columns, so we'll add a clear floating clear:both to the third column.

In general, we tend to define a separate CSS style for "clear floats", such as:

Viewplaincopytoclipboardprint?

.clear {clear:both;} .clear {clear:both;}

Then use it to specifically "clear floats".

◆ clear:both; can end the float before he appears.

Viewplaincopytoclipboardprint?

.demodiv {float:left;width:100px;height:50px; background:red;margin:5px;} .d {clear:both} style > 1div > 2div > div > 3div > 4div > .demodiv {float:left;width:100px;height:50px; background:red;margin:5px;} .d {clear:both} style > 1div > 2div > div > 3div > 4div >

The effect picture is as follows:

Clear:both parameter description

◆ syntax: clear:none | left | right | both

◆ parameters:

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

◆ description: the value of this property indicates that edges with floating objects are not allowed. See float property. The corresponding script feature is clear

Mainly used in the structure of div and div. If the inner div is floating, the clear float is generally required, otherwise the inner div will exceed the frame of the outer div

It is very important to use clear:both; when we need to clear floats. Generally, when we need to clear floats, we should not use clear:both; lightly because it also has deputy use.

Add a div after the two div to float, and set the style to clear:both, which is fine (because clear:both states that the div does not allow floating elements around, so run down and open the parent div), as follows:

Viewplaincopytoclipboardprint?

Abc div > abc div > div > abc div > abc div > div >

In your two-column case, I usually float:left both.

The above is the editor for you to share how to call clear:both to clear the float, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, 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.