前端常用布局方式总结CSS-浮动与清除浮动

2023-02-13 68 阅读2分钟

浮动布局：

float: left/right;

如何清除浮动？

添加额外标签：在浮动元素末尾添加一个空的标签，例如

<div style=”clear:both”></div>

优点：通俗易懂，容易掌握
缺点：添加许多无意义的空标签，有违结构与表现的分离，在后期维护的噩梦

使用br标签，br 有 clear=“all | left | right | none” 属性

优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用

父元素设置overflow: hidden;

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素;在IE6中还需要触发 hasLayout, 例如 zoom：1;

父元素设置overflow: auto;

优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等; 在IE6中还需要触发 hasLayout ，例如 zoom: 1;

父元素也设置浮动

优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

父元素设置display: table;

优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

使用after伪元素

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加;由于IE6-7不支持:after，使用 zoom:1触发 hasLayout.

.clearfix:after {
    content:".";
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
}  
.clearfix { *zoom:1; }