如果在Web中 clearfix 无法运行 ,可能是由于代码出现错误或浏览器兼容性问题导致的 。建议可以尝试使用其他清除浮动的方式或使用浏览器的开发者工具进行排查。可以检查代码中是否存在语法上的错误或CSS样式上的问题。同时,可以尝试引入一些兼容性库,以兼容过去浏览器的差异性 。
1、子任用的最多的一种 clearfix hack
view sourceprint
01..clearfix:after{
02.display:block;
03.clear:both;
04.height:0;
05.line-height:0;
06.visibility:hidden;
07.content:".";
08.font-size:0;
09.}
10..clearfix{
11.zoom:1;
12.}
2 、比较常见的另一种 clearfix hack
view sourceprint
01..clearfix:after {
02.content: ".";
03.display: block;
04.clear: both;
05.visibility: hidden;
06.line-height: 0;
07.height: 0;
08.}
09..clearfix {
10.display: inline-block;
11.}
12.html[xmlns] .clearfix {
13.display: block;
14.}
15.* html .clearfix {
16.height: 1%;
17.}
最近比较火的一种 clearfix hack
作者博客:A new micro clearfix hack
view sourceprint
01..cf:before,
02..cf:after {
03.content: " ";
04.display: table;
05.}
06..cf:after {
07.clear: both;
08.}
09..cf {
10.*zoom: 1;
11.}
其他两种方法 clearfix hack
摘自:XHTML float clear without markup test
.clearfix with IE8
view sourceprint
01./* full clearfix */
02./* add to floating elements which shall clear floating after themselves */
03.* html .clearfix {
04.height: 1%; /* IE5-6 */
05.}
06.*+html .clearfix {
07.display: inline-block; /* IE7not8 */
08.}
09..clearfix:after { /* FF, IE8, O, S, etc. */
10.content: ".";
11.display: block;
12.height: 0;
13.clear: both;
14.visibility: hidden;
15.}
已测试版本:
FF3.6, 3.5, 3, 2.0.0.16, 1.5, Camino
IE9PR3, 8, 7, 6, 5.5, 5.01, IE5Mac
Opera 9.51, 9.27, 8.5
Chrome 5
Safari 3.1.1 (PC, should work on Mac too)
本文来自作者[接子圣]投稿,不代表格瑞号立场,如若转载,请注明出处:https://gree0731.com/ig/5812.html
评论列表(4条)
我是格瑞号的签约作者“接子圣”!
希望本篇文章《web中clearfix运行不出来》能对你有所帮助!
本站[格瑞号]内容主要涵盖:生活百科,小常识,生活小窍门,知识分享
本文概览:如果在Web中 clearfix 无法运行,可能是由于代码出现错误或浏览器兼容性问题导致的。建议可以尝试使用其他清除浮动的方式或使用浏览器的开发者工具进行排查。可以检查代码中是...