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
<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
<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
<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> ; <div class= "Box2" > <ul class= "ul02" > <li> li Nanjiang </li> <li> guest Jiangnan </li> <li> Jianggo </li> </ul></div>
Clear Floating Mode Four
<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>
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>
<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
Clear Floating Mode Six
<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>
Clear Floating Mode Seven
<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> <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>
16-css base-Clear float