css之浮动清除

浮动的清除

浮动的性质: 脱标 贴边 字围 收缩

  1. 给浮动的元素的祖先元素加高度(不常用)

    如果一个元素要浮动,那么它的祖先元素一定要有高度。高度的盒子,才能关住浮动。

  2. clear:both
    cleat就是清除,both指的是左右浮动都要清除。
    缺点:margin失效

  3. 隔墙法
    在两个浮动的元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追其那面的浮动元素。

        <div>
            <p></p>
            <p></p>
        </div>
        <div class="cl h10"></div>
        <div>
            <p></p>
            <p></p>
        </div>
    

缺点:第一个div还是没有高度

  1. 内墙法

        <div>
            <p></p>
            <p></p>
            <div class="cl h10"></div>
        </div>
        <div>
            <p></p>
            <p></p>
        </div>
    

    优点: 不仅能够使后部分的p不去追前面的p,并且能让第一个div撑出高度.

  2. overflow:hidden
    一个父亲,不能被自己的浮动的儿子撑出高度.但是,如果给这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度.这个现象,不能解释.就是浏览器的小偏方.
    并且它能够让margin 生效.

浏览器兼容问题

  1. IE6不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大.
    解决办法: 将盒子的字号,设置小(小于盒子的高).比如0px;
height:4px;
_font-size:0px;

IE6专有属性: 只要给css属性之前,加上下划线.

  1. IE6 不支持用overflow:hidden 来清除浮动
    解决办法: 以毒攻毒,追加一条 _zoom:1 ;
    完整写法:
  overflow:hidden;
  _zoom:1;

_zoom:1; 能够触发IE6浏览器的hasLayout机制

    原文作者:假行僧396741
    原文地址: https://www.jianshu.com/p/a9d042416fa5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞