《前端》清除浮动bug使用 .clearfix{*zoom:1;} 和 .clearfix:after

.clearfix{*zoom:1;} /*这是针对于IE6/7的,因为IE6/7不支持:after伪类,这个神奇的zoom:1让IE6/7的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样*/.clearfix:after{display:block; overflow:hidden; clear:both; heig...
摘要由CSDN通过智能技术生成

一、浮动的概念

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、浮动的影响

1. 浮动会导致父元素高度坍塌

而我们需要的是下面的样式:

父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题。浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动。

2、什么时候需要浮动 ?什么时候需要清除浮动 ?

(1)为什么需要浮动 
据网上资料显示,以前提出浮动的概念主要是为了解决左边图片,右边文字的需求,后来浮动在网页的布局中应用比较广泛。我之前在学习网页设计时,针对于一个花店的导航页,存在许多的图片显示,而有效并且美观的布局样式极为重要,这时float属性就显得尤为重要。 
(2)什么时候需要清除浮动 
浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值