清除浮动最简单的两种方式

总结一下,使用float的话,需要清除浮动的两种简单方式:

1.通过伪元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动常用简单的两种方式</title>
<style>
.box>li{padding:20px 5px;background:orange;float: left;}
.box::before,.box::after{content:'';clear: both;display: table;*zoom:1;}
</style>
</head>
<body>
<div class="box"><li>测试1</li><li>测试2</li><li>测试3</li>
</div>
<li class="box1">123</li>
</body>
</html>

通过伪元素是自我感觉质量比较高的清除浮动的一种方式,因为不再向DOM中添加元素

其是通过sass和less开发中,清除浮动在重复性使用中会变得格外轻松:

%clearfix{
*zoom:1;/*ie*/
    &::after,&::before{
        content: '';
        display: table;
    }
    &::after{
        clear: both;
    }
}
.box7{
    @extend %clearfix;
}

编译后结果:

.box7 {
  *zoom: 1;
  /*ie*/
}
.box7::after, .box7::before {
  content: '';
  display: table;
}
.box7::after {
  clear: both;
}

上面这段代码如果没有接触sass的小伙伴可以直接忽略:)

2.通过标签

定义一个class标签: 

<div class="clearfix"></div>

css部分需要添加:

.clearfix{clear: both;*zoom: 1;display: table;}
发布了30 篇原创文章 · 获赞 19 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览