首页 > 其他 > 详细

清除浮动

时间:2019-07-30 13:49:57      阅读:95      评论:0      收藏:0      [点我收藏+]

清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的情况。

清除浮动的方法有很多种,这里我只写被大家推荐切常用的方法。

1、父级添加伪类

// html部分
<div class=father>
  <div class="left"></div>
  <div class="right"></div>
</div>

// css部分
.father:after{
    display: block;
    content: ‘‘;
    clear: both;
}
.left{
    width: 200px;
    heght: 100px;
    float: left;
}
.right{
    width: 200px;
    heght: 100px;
    float: right;
}

2、父级添加overflow属性

可以通过触发BFC的方式,可以实现清除浮动效果

// html部分
<div class=father>
  <div class="left"></div>
  <div class="right"></div>
</div>

// css部分
.father{
    overflow: hidden;
}
.left{
    width: 200px;
    heght: 100px;
    float: left;
}
.right{
    width: 200px;
    heght: 100px;
    float: right;
}

 

清除浮动

原文:https://www.cnblogs.com/00feixi/p/11269410.html

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