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


html浮动定位相关知识

浮动        浮动float分为左浮动和右浮动 ,  默认是没有浮动效果的 .           兄弟级浮动 : 如果都不设置浮动效果,那么两个div处于同一个文本流(相当于同一层级上). d...
  • qq_40891390
  • qq_40891390
  • 2017年11月02日 20:36
  • 90

html浮动与定位

此篇blog主要记载近期学习的有关浮动和定位的知识 1.浮动:浮动是在html页面布局最常用的一个属性,可以说,所有的网页,都需要大量使用浮动来进行页面布局   浮动的关键词是float,有向左浮...
  • Nice_try_lp
  • Nice_try_lp
  • 2017年11月02日 19:33
  • 210

HTML浮动与定位方式详解

关于float与position的三种状态使用。 先简单介绍一下position的三种状态分别是fixed、absolute和relativefixed:固定元素位置,脱离正常文档流,不论页面中元素...
  • charles_xyc
  • charles_xyc
  • 2017年08月14日 07:10
  • 175

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...
  • chelen_jak
  • chelen_jak
  • 2014年12月16日 17:03
  • 8612

流式布局、浮动布局及绝对定位布局

知识点: 1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局; 2.精通标准文档流、盒子模型、float属性以及position属性等知识。 W3C 由万维网联盟制定...
  • m0_38118446
  • m0_38118446
  • 2017年04月30日 10:06
  • 825

CSS清除浮动和定位

1.原来在一行中的两个块,会因为浏览器窗口的大小改变而改变其原来的位置(变成多行),浏览器窗口宽度不够容纳解决方法:加个父div,并且设置宽度.father {width:500px;height:3...
  • jethai
  • jethai
  • 2016年08月28日 14:05
  • 3278

css中的float和相对定位,绝对定位,z-index

css中有float浮动属性,参数分别为left,right,none和inherit,意思分别为左浮动,有浮动,不浮动和继承父元素浮动属性; 那浮动是什么意思呢?浮动就是说这个元素飘起来了,假设你...
  • ice_time1
  • ice_time1
  • 2015年08月25日 17:21
  • 910

Html中有关定位于浮动

1.a标签:    >默认样式:color:blue;text-decoration:underline,cussor:pointer    >行为:    -->a:link:默认颜色   ...
  • qq1556837534
  • qq1556837534
  • 2015年11月20日 23:26
  • 189

HTML/CSS 块、内嵌、浮动、定位元素的特点对比

内联,内嵌,行内属性标签——————————————– 1、默认同行可以继续跟同类型标签; 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin和padding...
  • u014420383
  • u014420383
  • 2015年08月08日 17:22
  • 1129

CSS布局:浮动与绝对定位的异同点

浮动 ( float ) 和绝对定位 ( position:absolute ) 相同点:(1)都是漂起来( 离开原来的位置 ) (2)并且都不占着原来的位置 不同点:float后,它后面的对...
  • cherry_vicent
  • cherry_vicent
  • 2014年12月14日 18:11
  • 1583
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
举报原因:
原因补充:

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