如何清除浮动带来的影响

如何清除浮动带来的影响

在前端开发中,清除浮动的方法有多种,开发人员可以根据自己的喜好选择不同的方式。

  • 给父元素添加一些属性
  • 添加空div元素
  • 本人经历的特殊情况

父元素添加属性

1、将设置float的元素的父元素也设置float。

  父元素也设置浮动,局限性较大。

2、设置父元素的overflow为hidden。

3、设置父元素的display为inline-block。

  缺点:可能不符合情况要求。
  

添加空元素

4、浮动元素的下方加入空的div元素,并添加属性:clear:both.

5、使用after伪类(内容生成,此方法同上)

some:after{

  content:”.”;

  height:0;

  visibility:hidden;

  display:block;

  clear:both;

}

特殊情况

<div id="header_right">
                 <ul id="header_right_1">
                   <li><a href="">登录</a>&nbsp;<span></span></li>
                   <li><a href="">注册</a>&nbsp;<span></span></li>
                   <li><a href="">消息通知</a>&nbsp;<span></span></li>
                   <li id="gwc"><a id='header_right_gwc'>购物车(0)</a>
                   <div id="warning_cart" >
                      您的购物车中还没有商品,赶紧选购吧!
                   </div>
                   </li>
                 </ul>
</div>

并且css中设置了相应的样式,以上所有元素均是浮动。并且#warning_cart的宽和高都超越了其父元素#gwc,这种情况下,不清除浮动,会导致元素偏离原位,无法实现相应的效果。
解决办法:设置其父元素的宽度和高度,#warning_cart浮动时就自动下移,不会影响兄弟元素和父元素的布局。此时元素是溢出情况,会影响后续元素的定位,所以需要进行绝对定位,fixed。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值