Text-to-detail CSS basics clear Floating

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.