转载的清除浮动 – jerrylsxu

2019年8月8日 02:59:11html教程评论1.8K views阅读模式

总结一下：

{clear:both;}设置了clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非浮动元素，或是额外添加一个新的空元素。
.after-clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素，原理同上，所以只适用于父容器最后一级子元素是浮动的，即浮动元素后面没有非浮动元素把它和父容器隔开。只是IE6/7不支持:after 伪元素。
{overflow:hidden;}或overflow:auto;创建了overflow 样式值为非visilbe的元素，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词 Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。测试时当子元素同时混有浮动元素和非浮动元素时效果并不好。IE6/7 中并不被支持。
{display:table}或{display:table-cell}当元素 display 值被设定为 table 或 table-cell 时，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。IE6/7 中并不被支持。
使用表格类元素作为浮动元素容器。把浮动元素匡在td里就木有浮动问题，而且木有兼容问题。当使用 TABLE TD TH 等 TABLE 系列标签时，元素的 display 值实际上说是 display: table 系列，这同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时在 IE 6/7 中，TABLE TD TH 等 TABLE 系列标签天然拥有 haslayout 特性。
浮动父元素。虽然这种方式并没有兼容问题，但实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。
触发 hasLayout。下面是原文的这部分内容：

样例：

haslayout-clear-float:{width:1px}
或
.haslayout-clear-float:{height:1px}
或
.haslayout-clear-float:{zoom:1}

'Layout' 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

'Layout' 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

'Layout' 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

'Layout' 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 'hasLayout' 属性，属性值可以为 true 或 false。当一个元素的 'hasLayout' 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

默认拥有布局的元素：

, 

   
   
    
    , 
    
    
       , 
       
     ,  
         , , , , <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee> </pre> </li> <li>可触发 hasLayout 的 CSS 特性： <pre class="brush:php;toolbar:false">display: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值) </pre> </li> <li>IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ： <pre class="brush:php;toolbar:false">min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed </pre> </li> <li>IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。</li> </ul> <p>注意兼容问题：<br />haslayout 特性仅 IE 支持，其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。</p> <p class="comment">注：IE hasLayout 特性厂商说明链接：<a href="http://msdn.microsoft.com/en-us/library/ms533776%28VS.85%29.aspx">hasLayout Property</a></p> <p>以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。</p> <h2 id="header_9">建议</h2> <p>对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：</p> <ul> <ul> <li>采用一个HTML标签，以及css的clear属性，来手工清理浮动；</li> <li>为元素设置 overflow:hidden 或 overflow:auto 值，配合可以设置 zoom:1 样式触发 IE6 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。</li> <li>采用伪元素:after，配合可以设置 zoom:1 样式触发 IE6/7 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。</li> </ul> </ul></div><div id="MySignature"></div> <div class="clear"></div> <div class='share layui-clear bdsharebuttonbox'> <li ><a href='javascript:;' data-cmd="weixin" class='wechat'><i class="layui-icon"></i>微信</a></li> <li ><a href='javascript:;' data-cmd="more" class='share-btn'><i class="layui-icon"></i>分享</a></li> </div> <img src="/static/images/article_wechat.jpg?1" style="margin-top: 30px;" alt="php教程最新课程二维码"/> <div class='tags layui-clear'> <li>相关标签：<a href="/search?word=转载的清除浮动-jerrylsxu" target="_blank">转载的清除浮动 - jerrylsxu</a></li> <li class='line'> 本文原创发布php教程 ，转载请注明出处，感谢您的尊重！ </li> </div> <div class='page layui-clear'> <ul> <li>上一篇：<a href="/div-tutorial-43516.html">伪类 伪元素 如何区分 - 紫色的小黄人</a></li> <li>下一篇：<a href="/div-tutorial-43521.html">深入理解CSS背景 - 小火柴的蓝色理想</a></li> </ul> </div> </div> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10862.html" target="_blank">Html如何设置横向导航结构_HTML/Xhtml...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10863.html" target="_blank">Html+css实现纯文字和带图标的按钮_HTML...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10868.html" target="_blank">HTML对于元素水平垂直居中的探讨_HTML/Xh...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10871.html" target="_blank">修改输入框placeholder文字默认颜色-we...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-43517.html">转载的清除浮动 - jerrylsxu</a></li> </ul> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31616.html" target="_blank" title='轮播图案例讲解'>轮播图案例讲解</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31615.html" target="_blank" title='轮播图案例的预备知识(3)'>轮播图案例的预备知识(3)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31614.html" target="_blank" title='轮播图案例的预备知识(2)'>轮播图案例的预备知识(2)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31613.html" target="_blank" title='轮播图案例的预备知识(1)'>轮播图案例的预备知识(1)</a></li> </ul> <div class="layui-clear"></div> </div> <div class="comment layui-clear"> <div class="J_Header" id="J_Header"> <p class="header-title">网友评论</p> <p class="header-protocol">文明上网理性发言，请遵守 <a href="javascript:void(0);">新闻评论服务协议</a></p> <a class="article-comment-publish" href="javascript:void(0);">我要评论</a> </div> <div class="layui-row diy-page"></div> <div class="text-box layui-clear article_comment_textarea" > <div class="box-left"> <li> <a href="javascript:login_trigger()"> <img src="/static/images/user_avatar.jpg" alt=""> </a> </li> <li><a href="javascript:login_trigger()"></a></li> </div> <div class="box-right"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea"> 立即提交  专题推荐 
        
          独孤九贱-php全栈开发教程 全栈  100W+
 主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
  
          玉女心经-web前端开发教程 入门  50W+
 主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
  
          天龙八部-实战开发教程 实战  80W+
 主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
  
       
      作者信息        php教程  
 认证0级讲师  
        
        
          最近文章 
         
             发布技术文章    
        
        最新文章 
        热门排行 
          
        
           
        html是什么语言 
        图片超链接怎么设置 
        如何学习html5 
        html的正式名称是 
        html怎么添加css样式？ 
        HTML怎么引入js文件？ 
        jsp四大作用域有什么 
        页面中文本域的值怎么设置 
          
        
           
        html p标签怎么换行？html p标签添加br换行标签的应用 
        html怎么换行？换行代码是什么？九种html文字换行方法总结 
        html怎样设置背景颜色？HTML背景颜色代码详细分析 
        认识<br>与<p>标签之间的区别 
        六款好用的html5编辑器 
        html搜索框怎么设置？html搜索框input标签的使用方法实例 
        HTML编辑器有哪些？最好用的4款HTML编辑器推荐 
        如何制作一个简单的HTML登录页面（附代码） 
       
       推荐视频教程    javascript初级视频教程 
   jquery 基础视频教程 
    视频教程分类  
        
          php视频教程   
          html视频教程   
          css视频教程   
          JS视频教程   
          jQuery视频教程   
          mysql视频教程   
          Linux视频教程   
          Python视频教程   
                  
        
        网站首页  
        PHP视频 
        PHP实战 
       
 PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！
 Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9  皖公网安备 34010402701654号 免责申明赞助与捐赠