@浮动介绍

本文介绍了浮动的概念,即在非IE浏览器中,当元素设置浮动后可能导致父元素高度塌陷的问题。接着阐述了清除浮动的重要性,因为不处理浮动会影响父元素及其后续元素的布局。文章列举并详细解释了四种常见的清除浮动的方法:额外标签法、设置父元素`overflow:hidden`、使用`:after`伪元素以及使用`:before`和`:after`双伪元素。这些方法各有优缺点,适用于不同的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


一、什么是浮动?

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象,这个现象叫浮动溢出。

二、为什么要清除浮动?

如果父元素不设置高度情况下,高度由子元素撑开,一旦子元素设置浮动,父元素会失去高度进而影响后面元素布局;

三.清除浮动的常用方法

方法一:额外标签法

给谁清除浮动,就在其后额外添加一个空白标签 ,给其设置clear:both。

优点:通俗易懂,书写方便。

缺点:添加许多无意义的标签,结构化比较差。

clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来 。

方法二:父元素添加overflow:hidden

通过触发BFC方式,实现清除浮动

优点:代码简洁

缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。
  
  代码如下(示例):

 #parent{
    overflow: hidden;
}

方法三:使用after伪元素清除浮动

优点:符合闭合浮动思想,结构语义化正确。

缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout。
  
代码如下(示例):

  #parent:after{
 content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}

方法四:使用before和after双伪元素清除浮动

优点:代码更简洁

缺点:用zoom:1触发hasLayout.
  
代码如下(示例):

#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
    clear: both;
}
#parent{
    *zoom: 1;
}

文章转载自:添加链接描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值