css中清除浮动的方法有哪些

css中清除浮动的方法有哪些

css清除浮动可以理解为打破横向排列。  清除浮动的关键字是clear，官方定义如下：
 语法：

       clear : none | left | right | both
       取值：
       none  :  默认值。允许两边都可以有浮动对象
       left   :  不允许左边有浮动对象
       right  :  不允许右边有浮动对象
       both  :  不允许有浮动对象
  根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear）
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
具体做法：
要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

一、使用空标签清除浮动；
二、使用overflow属性
　　此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6。
三、使用after伪对象清楚浮动
此三种方法各有利弊，使用时应择优选择，比较之下第二种方法更为可取。

div {clear:left} 清除左浮动
div {clear:right} 清除右浮动
div {clear:both} 清除两边浮动
还有一种方法是为上一级的父元素规定宽度与高度。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息