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

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

问题描述：

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

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

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

好吧，找google万能大仙帮忙；

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

/*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万能大仙的时候无意中找到了“大前端”(https://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%}