First, throw a problem brick (display:block) look at the phenomenon:
Parsing the HTML code structure:
?
12345 |
<
div
class
=
"outer"
>
<
div
class
=
"div1"
>1</
div
>
<
div
class
=
"div2"
>2</
div
>
<
div
class
=
"div3"
>3</
div
>
</
div
>
|
Parsing CSS Code styles:
?
1234 |
.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;} |
If you do not set the height of the outermost div.outer container, and the elements inside it do not float, then the height of the outer layer will be automatically open. If the outer container is set to a height, when the outer container can hold the inner container, the float can be realized, and the outer container will be open because the fixed height is set. However, if you do not specify a height for the outer container, and the inner container is set to float, the following problem occurs :
(1): Background cannot be displayed (2): Border cannot be stretched (3): Margin setting value does not display correctly
Second, clear CSS floating:
method One: Add new elements, apply clear:both; This operation must be immediately after the element with the float set, otherwise it will not work
Html:
?
123456 |
<div
class
=
"outer"
>
<div
class
=
"div1"
>1</div>
<div
class
=
"div2"
>2</div>
<div
class
=
"div3"
>3</div>
<div
class
=
"clear"
></div>
</div>
|
Css:
?
1 |
.clear{clear:both; height: 0; line-height: 0; font-size: 0} |
Result: (corrected: Padding will not be affected)
Method Two: Parent div definition Overflow:auto(Note: The parent div is the div.outer here). its parent element must contain elements that are set floating, and cannot contain elements that are not floating, which requires us to be careful when we write the HTML structure .
Html:
?
123456 |
<
div
class
=
"outer over-flow"
> //这里添加了一个class
<
div
class
=
"div1"
>1</
div
>
<
div
class
=
"div2"
>2</
div
>
<
div
class
=
"div3"
>3</
div
>
<!--<div class="clear"></div>-->
</
div
>
|
Css:
?
123 |
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 } |
The result: Of course it is! Img{display:none}; Sketch
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 Hiddent and auto values to clear the float, but remember not to use the visible value, if the use of this value will not be able to achieve clear floating effect, the other two values can be, its area is said to be a SEO friendly, another hidden SEO is not too friendly, The other difference I can not say, nor waste time.
method Three: It is said to be the highest method : After method: (note: Father acting on a floating element). its parent element must contain elements that are set floating, and cannot contain elements that are not floating, which requires us to be careful when we write the HTML structure .
First of all, the principle: This method to clear the float is now the most popular on the internet, a clear float, he is using: after and: Before to insert two elements inside the element, from the face to clear the effect of 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:
?
12 |
.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, where content () can be value or 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.
Last: But not unimportant, nor do I not know!
Next tab directly clear floating Brother label floating, the next tab in the properties of the direct write to clear clear:both, so you can clear the above label floating without adding an empty label to clear the float.
$ ('. float '). End (). Conclusion: Although there are a lot of ways to clear the float, but not every one is suitable for you, and not each can be very good compatible with all browsers, so refer to you think the best way to do, personally think the method three good, do not need more than the label, but also very good compatibility. 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!
How to achieve clear float (reprint)