16-css base-Clear float

16-css base-Clear float

<a href= "http://study.163.com/course/courseMain.htm?courseId=1003864040" > Video viewing Address </a>

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;        /*这里*/        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">        <li>大娃</li>        <li>二娃</li>        <li>三娃</li>    </ul></div><div class="box2">    <ul class="ul02">        <li>李南江</li>        <li>极客江南</li>        <li>江哥</li>    </ul></div>

• Before adding height:

• After adding height

• Note the point:

  • In the enterprise development can not write height not write height, so this way不常用

Clear Floating Mode Two

• Use Clear:both; properties to clear the effect of the previous floating element on me

• Example code:

 <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" > <li> Dava </li> <li> She </        li> <li> Sanva </li> </ul></div><div class= "Box2" > <ul class= "ul02" > <li> Li Nanjiang </li> <li> geek Jiangnan </li> <li> Jianggo </li> </ul></div>

• Add Clear:both; Front:

• Add Clear:both;

• Note the point:

  • The margin property is invalidated after using Clear:both, so不常用

Clear Floating Mode Three

• Add an extra block-level element between two boxes with floating child elements

• Example code:

<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{/* Use additional block-level elements to implement margin*/height:20px;        Background-color:deepskyblue; }</style> <div class= "Box1" > <ul class= "ul01" > <li> Dava </li> <li> two baby & lt;/li> <li> Sanva </li> </ul></div><!--here--><div class= "Wall H20" ></div&gt        ; <div class= "Box2" > <ul class= "ul02" > <li> li Nanjiang </li> <li> guest Jiangnan </li> <li> Jianggo </li> </ul></div> 

• Before adding extra block-level elements

• After adding extra block-level elements

• Watch out.

  • The margin effect can be achieved by setting the height of the extra label in the outer wall method
  • Sohu has used this technology extensively, but because of the need to add a lot of meaningless tags, so不常用

Clear Floating Mode Four

• Add an extra block-level element at the end of the previous box

• 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;        } ul li{Float:left;        }/* here */. wall{Clear:both; }</style> <div class= "Box1" > <ul class= "ul01" > <li> Dava </li> <li> two baby & lt;/li> <li> Sanva </li> </ul> <!--here--<div class= "Wall" ></div></di        V><div class= "Box2" > <ul class= "ul02" > <li> li Nanjiang </li> <li> geek Jiangnan </li> <li> Jianggo </li> </ul></div>  

• Before adding extra block-level elements

• After adding extra block-level elements

• Note the point:

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

Clear Floating Mode Five

• What is Overflow:hidden?

  • The function of Overflow:hidden is to clear the contents of the overflow box outside the border

• Sample code

.test{            width: 100px;            height: 100px;            border: 1px solid #000;            background-color: red;            overflow: hidden;}        <div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

• Before adding Overflow:hidden

• After adding Overflow:hidden

• How to use Overflow:hidden; clear float

  • add Overflow:hidden properties to the previous box

• Sample code

 <style> *{margin:0;        padding:0;            }. box1{background-color:red;            /* here */Overflow:hidden;        *zoom:1;            }. 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; }</style> <div class= "Box1" > <ul class= "ul01" > <li> Dava </li> <li> two baby &        lt;/li> <li> Sanva </li> </ul></div><div class= "Box2" > <ul class= "ul02" > <li> Li Nanjiang </li> <li> geek Jiangnan </li> <li> Jianggo </li> </ul></div>
     

• Add Overflow:hidden; front

• Add Overflow:hidden;

• Note the point:

  • Since the Overflow:hidden can prop up 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 need to add a *zoom:1;
    • Actually *zoom:1 can trigger IE8 before the haslayout mechanism of IE browser
  • Advantages can be added without adding additional tags and can prop up the height of the parent element, the disadvantage and the location of the combination of use will conflict

• The difference between *zoom:1 and _zoom:1

  • This is the hack notation, used to identify different versions of IE browser
  • _ The properties behind the IE6 can only be recognized
  • * The following properties IE6 IE7 can identify

Clear Floating Mode Six

• Add a 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 */. 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 class= "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.

16-css base-Clear float