CSS 浮动清理，不使用 clear:both标签
导读：收集整理的这篇文章主要介绍了CSS 浮动清理，不使用 clear:both标签，觉得挺不错的，现在分享给大家，也给大家做个参考。 例如： <div style="b...
收集整理的这篇文章主要介绍了CSS 浮动清理，不使用 clear:both标签，觉得挺不错的，现在分享给大家，也给大家做个参考。 例如： div style="background:#666; "> !-- float container -->
div style="float:left; width:30%; height:40px; background:#EEE; "> Some Content/div>
/div>
此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
若将代码修改为：
div style="background:#666; "> !-- float container -->
div style="float:left; width:30%; height:40px; background:#EEE; "> Some Content/div>
div style="clear:both"> /div>
/div>
注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：
div class="clearfix" style="background:#666; "> !-- float container -->
div style="float:left; width:30%; height:40px; background:#EEE; "> Some Content/div>
/div>
定义CSS类，进行“浮动清理”的控制：
@L_512_0@ 代码如下:
.clearfix:after { } {
content: ".";
clear: both;
height: 0;
visibilITy: hidden;
display: block;
} /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */
.clearfix { } {
display: inline-block;
} /* 这是对 mac 上的IE浏览器进行的处理 */
/**//* Hides From IE-mac \*/
* html .clearfix { } { height: 1%; } /* 这是对 win 上的IE浏览器进行的处理 */
.clearfix { } { display: block; } /* 这是对display: inline-block; 进行的修改，重置为区块元素*/
/**//* End hide from IE-mac */
此时，预览以上代码( 删去这种注释 )，会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS 浮动清理，不使用 clear:both标签
本文地址： https://pptw.com/jishu/606513.html