<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动三种方式</title> <style type="text/css"> .list0{ width: 210px; border: 1px solid #000; list-style: none; margin: 50px auto 0px; padding: 0px; } .list0 li{ float: left; width: 50px; height: 50px; margin:8px; border: 1px solid gold; background-color: cyan; line-height: 50px; text-align:center; } .list{ width: 210px; /*height: 200px;*/ border: 1px solid #000; margin: 50px auto 0px; list-style: none; padding: 0px; /*overflow: hidden;*/ /* 这是第一种解决方法 */ } .list li{ float: left; width: 50px; height: 50px; background-color: plum; border:1px solid aqua; margin: 9px; line-height: 50px; text-align: center; } /* .clearfix:after{ content: ""; display: table; clear:both; }*/ /*第三种解决方法*/ /*与top塌陷一起写*/ /*第一种写法*/ /* .clearfix:after{ content: ""; clear: both; display: table; } .clearfix:before{ content: ""; display: table; } */ /*精简写法*/ /*.clearfix:before,after{*/ /* 此处不能够简写元素名,每一个伪类名前面必须有所跟随的类名 */ .clearfix:before, .clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ zoom:1; } /*兼容IE浏览器语句.新版Edge可不用*/ body div strong{ color: black; } </style> </head> <body> <div style="color: gray;"> 在父集没有设置高度的时候,子集设置浮动.则不能够撑起父集的边框,形成bug.(类似top塌陷) </div> <ul class="list0"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <br> <br> <br> <br> <br> <div style="color: gray;"> <=====这个时候需要清除浮动.<br> <br> <br> 有三种解决方法:<br> 1.父集添加<strong>overflow:hidden;</strong>来撑起边框.但此方法会有负面影响.<br> 2.在子元素最后添加一个空的div块元素,并且添加行内样式为style="clear:both;"##例如:<strong><div style="clear: both;"></div></strong><br> 3.在style式样中添加专门针对此bug的解决式样.类似于第二种方式.不过不影响子集元素,且能够重复利用. <strong> <br> .clearfix:after{ <br> content: ""; <br> display: table; <br> clear:both;} </strong> <br> 并且在通常时候是与防top塌陷的bug是同时写入,在需要的时候一起用.<br> ===>最成熟的方法<=== <br> <strong> .clearfix:before, .clearfix:after{<br> content: "";<br> display: table; } <br> .clearfix:after{<br> clear: both; }<br> </strong> ===>最成熟的方法<=== <br> </div> <ul class="list clearfix"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <!-- <div style="clear: both;"></div> --> <!-- 这是第二种解决方法 --> </ul>
</body> </html>
塌陷是因为, 父元素属于文档流, 子元素浮动, 导致父元素无法捕捉子元素的高度, 导致自身高度为0.
解决思路有三:
1. 在子元素后添加一个新元素, 撑开高度.
2. overflow隐藏子元素
3. 使用clearfix(:alter或before)增加伪元素, 在不影响排版内容的情况下解决问题.