当前位置:  编程技术>WEB前端

CSS 浮动清理，不使用 clear:both标签

    来源: 互联网  发布时间：2014-10-04

    本文导语:  例如：                           Some Content          此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。 若将代...

例如：
         
                Some Content

        

此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
若将代码修改为：
         
                Some Content

                

        

注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：
         
                Some Content

        

定义CSS类，进行“浮动清理”的控制：
代码如下:

.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仍然会将其包围，进行高度自适应。
    
 
 

您可能感兴趣的文章:

  • css别忘记清除浮动clear:both
  • CSS中Float（浮动）相关技巧文章
  • CSS清除浮动常用方法小结
  • CSS网页布局入门教程8：三列浮动中间列宽度自适应
    •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。












  • 相关文章推荐
  • PHP去除html标签,php标记及css样式代码参考
  • 批量修改标签css样式以input标签为例
  • 技术文章 iis7站长之家
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • asp.net添加CSS、JS、Meta标签的方法
  • Asp.net 后台添加CSS、JS、Meta标签的方法
  • 实用的利用 CSS + <em>标签 来完成一个三角形的制作
  • CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版
  • 纯CSS实现标签导航制作
  • CSS网页布局入门教程10：带当前标识的标签式横向导航
  • css利用A标签的背景可能作出很有意思的效果第1/2页
  • 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
  • CSS标签切换代码实例教程 比较漂亮
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思？
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor


    • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3