笔记：清除浮动方法

来源：互联网发布：网络诈骗案一般关多久编辑：程序博客网时间：2024/06/18 16:00

方法出处：[http://www.cnblogs.com/zhongweizhu/p/6003537.html]

第一种：增加一个空的div，通过设置css清除浮动

<style>.clearfix{        clear: both;    }</style><body>  <div class="box1">div1</div>  <div class="box2">div2</div>  <div class="clearfix"></div>  <!--增加的div 只用于清除浮动-->  <div class="box3">div3</div></body>

第二种：使用overflow:hidden/auto实现

<style>    .box{        background-color: yellow;         overflow:atuo;     //或者是hidden    }    .box1{        width: 100px;        height: 100px;        background-color: green;    }    .box2{        width: 100px;        height: 100px;        background-color: red;    }</style><body><div class="box">    <div class="box1">div1</div>    <div class="box2">div2</div></div></body>

第三种：使用伪元素::after实现

<style>    .clearfix:after{    content:"";    display:table;    height:0;    visibility:both;    clear:both;    }   .clearfix{    *zoom:1;    /* IE/7/6*/   }</style> <body><div class="box clearfix">    <div class="box1">div1</div>    <div class="box2">div2</div></div></body>

阅读全文

0 0