您的位置:晶晶的博客>前端>浮动闭合解决方案---html-div浮动闭合问题笔记

浮动闭合解决方案---html-div浮动闭合问题笔记

最近在做一个母校的英文站点项目,虽然界面做的丑陋,但是还是想尽可能的做好,但是今儿遇到了一个非常棘手的问题;如图:

点击查看原图

问题描述:

一个父层div被设置成自动填充高度的布局层,然后带有边框,内部则是图片、文字的左右浮动层;html结构如下:

<div class="container">
<div class="img"></div>
<div class="texter"></div>
</div>

container为外层父级元素,是有float:left属性的,也就是传说中的浮动;而内侧img texter又是两个浮动元素,一个浮动到左侧,一个浮动到右侧(实际上是浮动到左侧,通过width让其自动靠拢);这样就出了问题了,ie很听话,没有图片中的左右两侧线条短路的情况,而chrome跟firefox就悲剧了,直接短路.........

试啊试,清除container的浮动尼玛干脆一点线段都没了,再试clear:left;没反应;不行,来个clear:both;更是无从说起。。。。。纠结了......

好吧,找google万能大仙帮忙;

直接说解决方案吧,也做个记录,以后再遇到直接翻看博客。代码如下:

<div class="container clearfix">
<div class="img"></div>
<div class="texter"></div>
</div>

/*style -1*/

.clearfix{overflow:auto;_height:1%} 

这个是最简洁的,据说是来至国外的某个牛人;这个也是解决我的困惑的方法

/*style -2*/

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

这个来至携程ued  也还不错

/*style -3*/

clearfix{overflow:hidden;_zoom:1;} 

这个是在大前端看到的,经过测试也通过

到此,问题解决,在请教google万能大仙的时候无意中找到了“大前端”(http://www.daqianduan.com)这么一个网站,里面的真才实货还不少,建议前端开发者有事没事去看看,真不错的一个网站。

--------------

--------------

--------------

最后,留下一个css完美重置的代码;这个也是从大前端拿来主义;留在此处,方便以后查阅

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td,p{margin:0;padding:0}
input,button,select,textarea{outline:none}li{list-style:none}img{border:none}textarea{resize:none}
body{color:#666;background:#fff;word-break:break-all;word-wrap:break-word;text-align:center}
body,input,textarea{font-size:12px;font-family:\5b8b\4f53,Verdana,Arial}
a{color:#305999;text-decoration:none;outline:none}
a:hover{color:#090}
.wrap{width:1000px;margin:0 auto;text-align:left;position:relative}
/*clearfix*/
.clearfix:after,.wrap:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix,.wrap{*+height:1%}

转载请注明本文标题和链接:《浮动闭合解决方案---html-div浮动闭合问题笔记

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交