本文共 1361 字,大约阅读时间需要 4 分钟。
指盒子按照HTML标签编写的顺序依次从上到下、从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写得先排列,后写的后排列,每个盒子都占据自己的位置。
1. 增加空白标签(不推荐)
在需要清除浮动的元素后面增加一个空白标签,设置其类为clear(类名任意)。 优点:通俗易懂,书写方便。 缺点:添加许多无意义的标签,结构化较差。.clear{ clear: both; }
clear的属性值有left、right、both、none和inherit。
2. 父级添加overflow方法(不推荐)
父级设置overflow:hidden,通过触发BFC的方式实现清除浮动的效果。 优点:代码简单(慎重使用,若该父盒子里还有position定位会引起麻烦) 缺点:代码增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。 ps:父级添加overflow:hidden,display:table也可以清除浮动。3. 使用after伪元素清除浮动(较常用)
after方式为空标签的升级版,好处是不用单独加标签了,给父级加上clearfix即可。 优点:符合闭合浮动思想,结构语义化正确; 缺点:由于IE6-7不支持:after,使用zoom:1,触发haslayout。.clearfix:after{ content:""; display:block; height: 0; clear: both; visibility: hidden; } .clearfix{ *zoom:1; /* zoom:1,就是ie6清除浮动的方式(其他浏览器不能识别,是指 ie7以下的版本其他浏览器看到*就不往下读了,不解析这句。) */ }
4. 使用before和after双伪元素清除浮动(较常用)
给父级元素添加clearfix。.clearfix:before,.clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
转载地址:http://buhwi.baihongyu.com/