转载的清除浮动-jerrylsxu

, 
, , 
, 



, , , , <fieldset>, <legend>
, <embed>, <object>, 
<marquee>
</script></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 外任意值)
</script></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
</script></pre>
</li>
<li>IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。</li>

<p>注意兼容问题：<br />haslayout 特性仅 IE 支持，其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。</p>
<p class="comment">注：IE hasLayout 特性厂商说明链接：hasLayout Property</p>
<p>以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。</p>
<h2 id="header_9">建议</h2>
<p>对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：</p>


<li>采用一个HTML标签，以及css的clear属性，来手工清理浮动；</li>
<li>为元素设置 overflow:hidden 或 overflow:auto 值，配合可以设置 zoom:1 样式触发 IE6 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。</li>
<li>采用伪元素:after，配合可以设置 zoom:1 样式触发 IE6/7 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。</li>



 




        </mip-showmore>
        <script type="text/javascript" src="https://jss.huatuo6.com/mobile/detail_dy.js"></script>
            <script type="text/javascript" src="https://jss.igat.cn/mobile/detail_left.js"></script>
            <script type="text/javascript" src="https://jss.igat.cn/mobile/detail_gg2.js"></script>
            
    </div><div on="click:showmore01.toggle" data-closetext="收起全文" class="mip-showmore-btn">显示全文</div>
    <div class="mar_prev">
        
        
    </div>
</div>


<script type="text/javascript" src="https://jss.igat.cn/mobile/detail_foot.js"></script>
        <script type="text/javascript" src="https://jss.igat.cn/mobile/share_cebian_gg1.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_xgyd.js"></script>
<script type="text/javascript" src="https://jss.igat.cn/mobile/share_cebian_gg2.js"></script>
<script type="text/javascript" src="https://jss.huatuo6.com/mobile/share_cebian_rmtj.js"></script>
            
<footer class="footer">
  Copyright © 2019-<span class="currentYear"></span>  版权所有<br>
</footer>

<script>
  var swiper = new Swiper('.i_banner .swiper-container', {
    pagination: '.i_banner .swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false,
    loop: true,
  });
</script>

<!--弹窗开始-->
<script type="text/javascript">
  $(function () {
    //弹窗2
    $('.menu_icon').click(function () {
      $('.tbox').show();
    })
    //关闭
    $('.close').click(function () {
      $('.tbox').hide();
    })
  })
</script>
<!--弹窗结束-->


<script type="text/javascript" src="https://jss.igat.cn/mobile/foot_foot.js"></script>
         <script type="text/javascript">
             const currentYear = new Date().getFullYear();
     $('.currentYear').html(currentYear)
 </script>
 <script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot.js"></script>
        </body>
</html>