[Web Front end] CSS Article 2. Clear floating, when you need to clear floating, clear the float what are the methods

cp:53304487

2. Clear floating, when need to clear float, clear float what are the methods?
I. When do I need to clear the float?

When we float (float) an element, our element is separated from the document stream, drifting like a boat on top of the document.

In CSS, any element can float. A floating element generates a block-level box, regardless of its own element.
Float is mostly popular with page layouts, and then does not clear the float after use, it will endless.

Know the above:

Parsing the HTML code structure:

<div class= "outer" >    <div class= "Div1" >1</div>    <div class= "Div2" >2</div>    <div class= "Div3" >3</div></div>

Parsing CSS Code styles:

. Outer{Border:1px solid #ccc;background:#fc9;Color:#fff;margin:50px Auto;padding:50px;}. Div1{width:80px;Height:80px;background:Red;float: Left;}. Div2{width:80px;Height:80px;background:Blue;float: Left;}. Div3{width:80px;Height:80px;background:Sienna;float: Left;}

I don't set the height of the outermost div.outer here, but we know that if the elements inside it don't float, the height of the outer layer will be automatically open. However, when the inner element floats, there is an impact:

1. The margin of the parent box is affected and cannot be left or right centered,
2, I did not set the height of the parent box, the height of the floating stepfather box is not open, the height of the picture is padding bring the effect.

Two. What are the ways to clear the float?
The purge (clear) also has 4 possible values. The most common is the both, clear the left and right sides of the float. Left and right can only clear One direction of the float. None is the default value.

Method One: Add new elements to apply clear:both;
Html:

<div class= "outer" >    <div class= "Div1" >1</div>    <div class= "Div2" >2</div>    <div class= "Div3" >3</div>    

Css:

. Clear {Clear:both; height: 0; line-height: 0; font-size: 0}

Effect:

That

"Supplement":
Use an empty label to clear the float.

Method Two: Parent div definition Overflow:auto (note: The parent div is the div.outer here)

Html:

<div class= "outer over-flow" >//Add a class    <div class= "Div1" >1</div>    <div class= " Div2 ">2</div>    <div class=" Div3 ">3</div>    

Css:

. Over-flow {    overflow: auto; Zoom: 1; //zoom: 1; is dealing with compatibility issues }

Ditto.

Principle: Use the overflow property to clear the float there is a point to note that the overflow property has three attribute values: hidden,auto,visible. We can use the Hiddent and auto values to clear the float, but remember that you cannot use the visible value, and if you use this value you will not be able to clear the floating effect, the other two values can be.

"Supplement":
Using the Overflow property
This method effectively solves the drawback of having to increase the unintentional code by clearing the float with an empty label element. Using this method is simply to define the CSS property in the element that needs to clear the float: Overflow:auto. Overflow:auto, is to let highly adaptive, zoom:1, is to be compatible with IE6, can also be used height:1%, the way to solve, note that zoom does not meet the standard. Overflow:hidden can also be implemented. Overflow:hidden can also be implemented.

Method Three: It is said to be the highest method: After method: (note: Father acting on a floating element)
First, the principle: it is to use: after and: Before to insert two elements inside the element block, so as to achieve the effect of clear floating. The implementation principle is similar to the Clear:both method, except that: clear inserts a div.clear tag in HTML, and outer uses its pseudo-class clear:after to add a div.clear-like effect inside the element. Here's a look at how it's used:

. outer {zoom:1;}    /*==for Ie6/7 maxthon2==*/.outer:after {clear:both;content: '. '; Display:block;width:0;height:0;visibility:hidden;}   /*==for ff/chrome/opera/ie8==*/

wherein Clear:both; means to clear all floats; content: '. '; Display:block; for FF/CHROME/OPERA/IE8 cannot be absent,
where content () can take a value or be empty. The function of Visibility:hidden is to allow the browser to render it, but not to display it so that it can be clearly floated.
That

. outer{border:1px solid #ccc; background: #fc9; color: #fff; margin:50px auto;padding:50px;}. clearfix:after {content: ' ;d isplay:block;clear:both;visibility:hidden;zoom:1;}

 <div class="outer clearfix">

"Supplement":

Use after pseudo object to clear floating

After pseudo-object non-IE browser support, so does not affect the Ie/win browser. You can refer to the following example for specific wording. Attention should be paid to the following points in use.

A, the method must set height:0 in the pseudo-object that needs to clear the floating element, otherwise the element will be higher than the actual number of pixels;

B, the content property is required, but its value can be null, blue ideal when discussing this method, the value of the Content property is set to "."

again again: when an inner element is floating, the parent element will no longer contain the floating inner element if the float is not closed, because the floating element is out of the document flow. Which is why the outer layer cannot be stretched!

Characteristics of floating:
1. Floating elements, floating to the left or right, floating to the edge of the enclosing element, or the edge of the previous floating element.

2. Floating elements, no longer occupy space, and the level of floating elements is higher than ordinary elements.

3. The floating element must be a block element, regardless of the previous element.

4. If the floating element does not have a specified width, the float will be as narrow as possible, so the floating element is specified and high.

5. A line of multiple elements, to float everyone floating together.

[Web Front end] CSS Article 2. Clear floating, when you need to clear floating, clear the float what are the methods