首页 > 其他 > 详细

前端开发-清除浮动的终极解决方案

时间:2020-01-19 15:41:59      阅读:55      评论:0      收藏:0      [点我收藏+]
<div class="clear">
    <div style="float:left;">float left</div>
    <div >...</div>
</div>
<div>随便写的一些内容,为了对比清除浮动带来的影响</div>

方法一:使用clear:both清楚浮动

先说使用最多的,也是最推荐的方案兼容IE:
.clear{
  zoom: 1;
}
.clear::after{
  clear: both; // 清除浮动
  content: ""; // 增加一个空内容
  display: block; // 设置为块级元素独占一行
  height: 0; // 避免::after有高度
  width: 0; // 避免::after有宽度
  visibility: hidden; // 允许浏览器渲染它,但是不显示出来
}
也可以这样写
.clear { clear: both;
}

 

方法二:使用overflow属性:

.clear {
    overflow: auto; //或者 hidden 属性
}

方法三:设置zoom属性:

.clear {
    zoom:1; // IE独有
}

前端开发-清除浮动的终极解决方案

原文:https://www.cnblogs.com/ChineseLiao/p/12213812.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!