如何清除浮动带来的影响

如何清除浮动带来的影响

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

• 给父元素添加一些属性
• 添加空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。