关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释

1 篇文章 0 订阅
1 篇文章 0 订阅

首先了解CSS浮动的原则是非常重要的:

1.浮动元素会从文档正常流中删除,但它仍会影响布局
2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性,它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠
6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置,便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动
10.浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住

11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定) 
13.浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。

14.对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。

16.如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

我觉得更形象经典的博文,请参看网页:http://www.cnblogs.com/moveofgod/archive/2012/11/15/2771790.html

子元素撑开父元素的一些知识:

第一,父元素不浮动,子元素不浮动,子元素内容可以填充父元素
第二,父元素浮动,子元素不浮动,子元素内容可以填充父元素
第三,父元素浮动,子元素浮动,子元素内容可以填充父元素
第四,父元素不浮动,子元素浮动,子元素内容不可以填充父元素

经我多次试验,以上的“浮动”换成“绝对定位”是一样的效果。为什么呢?我认为一个元素浮动了会从普通文档流中删除,绝对定位也会从普通文档流中删除,二者都会使处于普通文档流中且未设置height的父元素塌陷,因为漂浮或绝对定位不占用空间了嘛,但是我在编写网页的过程中出现了一个情况,父元素绝对定位了,子元素设置了浮动,子元素却把父元素撑开了,其实这就能理解为绝对定位和浮动其实是把元素飘到另一个“平行世界”,在这个世界或者说层面上,绝对定位与浮动的元素是实体的,是要互相碰撞的,所以会撑开。

但是绝对定位与浮动虽然都使元素脱离了普通文档流,但还是脱离不了父元素这个“如来佛”的手掌。为什么这么说?因为父元素一动,无论里面的子元素是浮动还是绝对定位还是其他什么啥,都会跟着父元素动。特别是绝对定位有一点,如果一个元素是绝对定位,而且父元素都并没有设置什么相对定位、绝对定位,那么该元素就会相对于浏览器窗口定位,操蛋的一点是,如果用户调整浏览器窗口的大小,该元素还会动来动去,根据窗口大小实时定位,哪怕与别的元素重叠了也不管。

最后讲一点,原则上浮动元素之间是绝对不会互相重叠的,但是如果某个浮动元素设置了定位,无论是position还是margin、padding,要重叠必然会重叠,其他元素是不会为了满足不互相重叠原则而一味退后迁就的。所以如果发现浮动元素重叠,那么一定是哪个元素定位了。所谓“树欲静而风不止”就是这个道理。


  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值