1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>清除浮动</title> 8 <style> 10clear float Method / *9 (1): Additional labeling 11 (2): Parent added overflow property 12 by the BFC mode, can be realized clearly floating effect 13 can give the parent Add: overflow is hideden | Auto | Scroll 14 (. 3): Use after pseudo element 15 (4): using the before and after the double dummy elements 16 ---> additional tagging 17 add a word to the tag by the end of the floating element: for example: <div style = "Clear: both"> </ div> 18 is . 19 * / 20 is 21 is .box1 { 22 is width : 400px ; 23 is background :Green ; 24 / * trigger BFC, if the content is automatically hidden effect will lead to clear * / 25 / * overflow: hidden; * / 26 is } 27 28 .clearfix: After { 29 Content : '.' ; / * try with a small dot . * / 30 the display : block ; 31 is / * converted into block-level element * / 32 height : 0 ; 33 is visibility : hidden ; 34 is Clear : both; 35 } 36 37 .clearfix { 38 /* 兼容ie 六七 */ 39 *zoom: 1; 40 } 41 42 .one { 43 width: 100px; 44 height: 100px; 45 background: red; 46 float: left; 47 } 48 49 .two { 50 width: 100px; 51 height: 200px; 52 background: honeydew; 53 float: left; 54 } 55 /* .clear { 56 clear: both; 57 } */ 58 59 .box2 { 60 width: 400px; 61 height: 200px; 62 background : Pink ; 63 is } 64 / * generate a row element, tail * / 65 / * P: After { 66 Content: '' // can put text image 67 68 } * / 69 </ style > 70 </ head > 71 is 72 < body > 73 is < P > our songs </ P > 74 < div class = "box1 clearfix" > 75 < divclass="one"></div> 76 <div class="two"></div> 77 <!-- <div class="clear"></div> --> 78 </div> 79 <div class="box2"></div> 80 </body> 81 82 </html>
