div 清除浮动的四种方法

　　概述：为了解决父级元素因为子级内部高度为0的问题 (很多情况不方便给父级元素高，因为不知道有多少内容，让里面的盒子自动撑起高度)，清除浮动本质叫闭合浮动更好一些，清除浮动就是把浮动的盒子关到里面，让父盒子闭合出口和入口，不让他们出来影响其他元素。　

　　用法：选择器 {clear: 属性值} [left | right | both] 一般用both
　　left: 不允许左侧有浮动元素
　　right：不允许右侧有浮动元素
　　both: 同时清除左右两侧浮动的影响

方法一、额外标签法

　　在浮动元素末尾添加一个空标签例如：
　　<div style="clear:both"></div>
　　优点：通俗易懂，书写方便
　　缺点：添加许多毫无意义的标签，结构化较差

方法二、父级添加overflow

　　通过触发BFC的方式也可实现
　　可以给父级添加 overflow: hidden | auto | scroll 都可以实现
　　优点：代码简洁
　　缺点：内容增多时候容易造成不会自动换行导致内容被隐藏，无法显示要溢出的元素

方法三、使用after伪元素清除浮动

.clearfix:after {
            content: "."; /*内容为小点，尽量不要为空，防止旧版本丢弃*/
            display: block;
            height: 0;    
            visibility: hidden; /*隐藏盒子*/
            clear: both;
        }
.clearfix {
            *zoom: 1; /*代表ie6 7 能识别的特殊符号 带*的符号只有ie6 7才能执行，清楚ie6 7 浏览器的处理方式*/
        }
缺点ie 6 7不支持 所有需要zoom

方法四、使用before和after双伪元素清除浮动

.clearfix:before, .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

推荐使用

div 清除浮动的四种方法

猜你喜欢