笔记：清除浮动方法

最新推荐文章于 2022-11-24 11:37:35 发布

Begie K

最新推荐文章于 2022-11-24 11:37:35 发布

阅读量209

点赞数

分类专栏：笔记

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法出处：[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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Begie K

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记：清除浮动方法

方法出处：[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</di
复制链接

扫一扫