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

原创 2015年09月06日 20:47:18

首先了解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,要重叠必然会重叠,其他元素是不会为了满足不互相重叠原则而一味退后迁就的。所以如果发现浮动元素重叠,那么一定是哪个元素定位了。所谓“树欲静而风不止”就是这个道理。


相关文章推荐

Echarts图表通过Ajax动态更新数据

由于业务需求需要做一个可视化的展示Demo,这个Demo需要前后端的共同支撑,所以思路大致是:首先我们想到的是用ajax动态请求服务端获取到json文件后,然后将其解析为可以直接使用的数据,最后把这些...

纯css3制作炫酷的元素边框线条动画特效

这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效。这个元素边框线条动画使用伪元素和animation、keyframes来制作线条运动效果。          制作方法     htm...

【Android开发经验】APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了

只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件。那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢?...

makefile(这哥们很强,看完这篇文章,自己写makefile肯定能过关了)

跟我一起写MAKEFILE     陈皓 概述 —— 什么是makefile?或许很多Winodws的程序员都...

android:onTouch()和onTouchEvent()的区别?看完这篇文章就知道了

Android Touch Screen 与传统Click Touch Screen不同,会有一些手势(Gesture),例如Fling,Scroll等等。这些Gesture会使用户体验大大提升。 ...

【Android开发经验】APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了

只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件。那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢?...

mysql事务和 MySQL 加锁处理分析(原文博客讨论太激烈了,看评论可以看一天,这篇文章也没看完)

原文地址:http://hedengcheng.com/?p=771#_Toc374698322 背景   MySQL/InnoDB的加锁分析,一直是一个比较困难...

看完这篇文章受益终身

1、98年 马化腾等一伙凑了50万创办了腾讯 没买房;98年 史玉柱 借了50万搞脑白金 没买房;99年 丁磊用50万创办163.com 没买房;99年 陈天桥炒股赚了50万 创办盛大 没买房;99年...
  • sw2wolf
  • sw2wolf
  • 2011年12月06日 09:13
  • 2704

你还在靠“喂喂喂”来测语音通话质量吗,看完这篇文章你就能掌握正确姿势。

语音通话开发,对于一般开发者来说比较神秘,很多朋友不太清楚如何全面的评估第三方的音频引擎,如何科学的选择一家靠谱的语音通话服务供应商。 很多朋友还停留在这样的初级阶段:把demo调通,找几个人喂...

APP的缓存文件到底应该存在哪?看完这篇文章你应该就自己清楚了

只要是需要进行联网获取数据的APP,那么不管是版本更新,还是图片缓存,都会在本地产生缓存文件。那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢?...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
举报原因:
原因补充:

(最多只允许输入30个字)