Text-to-detail CSS basics clear Floating

Source: Internet
Author: User

Clear floating

Box height problem

Height of the content in the standard stream can prop up the height of the box

<style>        div{            background-color:red;        }        p{            width:200px;            height:100px;            Background-color:blue;        } </style><div>    <p></p></div>

The height of the content of the floating element in the floating stream can not hold up the height of the box

<style>        div{            background-color:red;        }        p{            Float:left;            width:200px;            height:100px;            Background-color:blue;        } </style><div>    <p></p></div>

Clear Floating Mode One

Add height to the previous parent box

Example code:

<style> {     margin:0;     padding:0; }. box1{     background-color:red;     /here */     height:50px;} box2{     background-color:purple;} ul{     List-style:none;}     ul01 li{ Background-color:blue; }. ul02 li{     Background-color:green;} ul li{     float:left;} </style><div class= "Box1" >   <ul class= "ul01" > Kva   </ul></div><div class= "Box2" >   <ul class= "ul02" > Li Nanjiang Pole jiangnan Jianggo   </ul></div>

-Add height before:-! [] (http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)

-Add height after-! [] (http://upload-images.jianshu.io/upload_images/647982-fcb8f6fa15c6be76.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)

-Note:-In the enterprise development can not write height not write height, so this way ' not used ' # # # #清除浮动方式二-Using Clear:both; properties clear the effect of the preceding floating element on me

-Sample code: HTML

<style>{margin:0;       padding:0;       }. box1{background-color:red;           }. box2{Background-color:purple;           /here/Clear:both;       /margin Invalid/margin-top:30px;       } ul{List-style:none;       }. ul01 li{background-color:blue;       }. ul02 li{background-color:green;       } ul li{Float:left; }</style><div class= "Box1" > <ul class= "ul01" > Kva </ul></div><div class= "Box2" > <ul class= "ul02" > Li Nanjiang Polar guest Jiangnan Jianggo </ul></div> 

-Add Clear:both; Before:-! [] (http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)-Add clear:both; [] (http://upload-images.jianshu.io/upload_images/647982-7b618617223102be.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)-Note:-The margin property is invalidated after using clear:both, so ' not used ' # # #清除浮动方式三-Add an extra block-level element between two boxes with floating child elements

-Sample code: HTML

<style> {margin:0;       padding:0;       }. box1{background-color:red;       }. box2{Background-color:purple;       } ul{List-style:none;       }. ul01 li{background-color:blue;       }. ul02 li{background-color:green;       } ul li{Float:left;       }/Here/. wall{Clear:both;           }. h20{/implement margin/height:20px with additional block-level elements;       Background-color:deepskyblue; }</style><div class= "Box1" > <ul class= "ul01" > Kva </ul></div><!--here-->< Div class= "Wall H20" ></div><div class= "Box2" > <ul class= "ul02" > Li Nanjiang Polar guest Jiangnan Jianggo </ul></div 

-Add extra block-level elements before-! [] (http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)

-Add extra block-level elements after-! [] (http://upload-images.jianshu.io/upload_images/647982-15566323325c738d.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)-note-The margin effect can be achieved by setting the height of the extra label in the external wall method-This technique is used extensively in Sohu, but because of the need to add a lot of meaningless tags, so ' not used ' # # #清除浮动方式四-In the previous Add an extra block-level element at the end of the box

-Sample Code HTML

<style>{margin:0;       padding:0;       }. box1{background-color:red;           }. box2{Background-color:purple;       /margin effective/margin-top:20px;       } ul{List-style:none;       }. ul01 li{background-color:blue;       }. ul02 li{background-color:green;       } ul li{Float:left;       }/here */. wall{Clear:both; }</style><div class= "Box1" > <ul class= "ul01" > Kva </ul> <!--here---<div class= "W All "></div></div><div class=" Box2 "> <ul class=" ul02 "> Li Nanjiang Polar guest Jiangnan Jianggo </ul></div>- Add extra block-level elements before-! [] (http://upload-images.jianshu.io/upload_images/647982-37c3591032b43be9.png?imageMogr2/auto-orient/strip% 7cimageview2/2/w/1240)-After adding extra block-level elements-! [] (Http://upload-images.jianshu.io/upload_images/647982-7799130801c08c6b.png?imageMogr2/auto-orient/strip%7Cimageview2/2/w/1240) 


-Attention points:
-The inner wall method automatically props up the height of the box, so you can set the margin property directly
-As with the inner wall method, it is necessary to add a lot of meaningless empty tags, which is inconsistent with the separation of structure and performance, and it will be a nightmare in later maintenance.

# # #清除浮动方式五
-What is Overflow:hidden?
-Overflow:hidden The function is to clear the overflow box outside the border of the content

-Sample Code

"' html.test{            width:100px;            height:100px;            border:1px solid #000;            background-color:red;            Overflow:hidden;} <div class= "Test" > I was writing I was writing I was writing I was writing I was writing I was writing I was writing I was writing I was writing I was text I was writing I was writing I was writing </div>

Before adding Overflow:hidden

After adding Overflow:hidden

How to use Overflow:hidden; clear floating

Add a Overflow:hidden property to the previous box

Sample code

-Note:
-because the Overflow:hidden can hold the height of the box, you can set the margin property directly
-IE8 previously did not support the use of Overflow:hidden to clear the float, so you need to add a *zoom:1;
-In fact *zoom:1 can trigger IE8 before the haslayout mechanism of IE browser
-The advantage can not add extra tags and can prop up the height of the parent element, disadvantage and positioning when combined with the use of conflict

-*zoom:1; and _zoom : 1 Difference
-This is hack notation, used to identify different versions of the IE browser
-_ After the property only IE6 can recognize the
-* properties behind IE6 IE7 can recognize


# #清除浮动方式六
- Add pseudo elements to the previous box to clear floating

-Example code

' HTML

<style> *{margin:0;        padding:0;        }. box1{background-color:red;            }. box2{Background-color:purple;        /*margin effective */margin-top:20px;        } ul{List-style:none;        }. ul01 li{background-color:blue;        }. ul02 li{background-color:green;        } li{Float:left;            }/* here */. clearfix:after {/* generates content as the last element */contents: "";            /* Causes the generated elements to be displayed as block-level elements, occupying the remaining space */display:block;            /* Avoid creating content that destroys the height of the original layout */height:0;            /* Make the generated content invisible and allow content that can be generated to be clicked and interacted with/Visibility:hidden;        /* Focus is this sentence */clear:both;        }. Clearfix {/* for compatibility with IE, triggering IE haslayout*/*zoom:1;   }</style><div class= "Box1 clearfix" > <ul class= "ul01" > <li> Dava </li>     <li> She </li> <li> Sanva </li> </ul></div><div class= "Box2" > <ul C lass= "Ul02" > <li> li Nanjiang </li> <li> geek Jiangnan </li> <li> Jianggo </li> </ul ></div>

Before adding pseudo-elements

After adding a pseudo-element

Note the point:

Essentially, as with the inner wall method, an additional block-level element is added at the end of the previous box.

The height of the box can be propped up after adding a pseudo-element, so you can set the margin property directly

There is another thing in CSS called Pseudo-class, pseudo-element and pseudo-class is not the same thing

Clear Floating Mode Seven

Add a double pseudo-element to the front box to clear the float

Sample code

<style> *{margin:0;        padding:0;        }. box1{background-color:red;            }. box2{Background-color:purple;        /*margin effective */margin-top:20px;        } ul{List-style:none;        }. ul01 li{background-color:blue;        }. ul02 li{background-color:green;        } li{Float:left;            }/* here */. cf:before,.cf:after {content: "";            display:table;        /* Focus is this sentence */clear:both;        }. CF {zoom:1; }</style><div class= "Box1 clearfix" > <ul class= "ul01" > <li> Dava </li> &LT;LI&G T, b </li> <li> Sanva </li> </ul></div><div class= "Box2" > <ul class= "ul02" &G        T <li> Li Nanjiang </li> <li> geek Jiangnan </li> <li> Jianggo </li> </ul></div> 

Before adding a double pseudo-element

After adding a double pseudo-element

Note the point:

The height of the box can be propped up after adding a pseudo-element, so you can set the margin property directly

First know that there are these ways, the principle needs to learn BFC and Haslayout to understand

Supports BFC browser (Ie8+,firefox,chrome,safari) by creating a new BFC to close the float;

BFC Browser (IE5-7) is not supported, and the float is closed by triggering haslayout.

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.