CSS three ways to clear float float summary

Source: Internet
Author: User

Reprint address: Https://my.oschina.net/leipeng/blog/221125css Clear floating float three ways to summarize, why clear float? What are the effects of floating?

first, throw a problem brick (display:block) look at the phenomenon:

Parsing the HTML code structure:

<Divclass= "outer">    <Divclass= "Div1">1</Div>    <Divclass= "Div2">2</Div>    <Divclass= "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. But when the inner element floats, there is a bit of impact:

(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;


<Divclass= "outer">    <Divclass= "Div1">1</Div>    <Divclass= "Div2">2</Div>    <Divclass= "Div3">3</Div>    <Divclass= "Clear"></Div></Div>


. 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)


<Divclass= "outer over-flow">//Add a class here<Divclass= "Div1">1</Div>    <Divclass= "Div2">2</Div>    <Divclass= "Div3">3</Div>    <!--<div class= "clear" ></div> -</Div>


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

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)

     First said the principle: This method to clear the float is now a clear floating on the Internet, 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. Let's take a look at its specific use method:

{Zoom:1;}    /* ==for IE6/7 maxthon2== */  {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!

CSS three ways to clear float float summary

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.