float(CSS浮动)

html-css010

float(CSS浮动),第1张

1、浮动元素会完全脱离文档流,不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动,

3、浮动元素默认不会从父元素中移出

4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素

5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移

6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高

在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离, 将会无法撑起父元素的高度,导致父元素的高度丢失。

父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱,所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理!

思想:在父元素的后面加内容,内容利用clear清除浮动元素带来的影响

1、绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

要使绝对定位或固定定位的元素水平居中,需要设置其 width 为固定值,并且 left: 0right: 0。

2、绝对定位 和 固定定位 的元素,若其宽度 width 或高度 height 的单位为 百分比 ,宽度和高度值是相对于其基于定位的元素计算的。(在使用一些stick插件时尤其要注意这点)。

扩展资料:

CSS技巧 

1、div的垂直居中问题 vertical-align:middle将行距增加到和整个DIV一样高 line-height:200px然后插入文字,就垂直居中了。缺点是要控制内容不要换行 

2、 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline例如: <#div id=”imfloat”>相应的css为 #IamFloat{ float:leftmargin:5px/*IE下理解为10px*/ display:inline/*IE下再理解为5px*/} 

3、浮动ie产生的双倍距离 #box{ float:leftwidth:100pxmargin:0 0 0 100px//这种情况之下IE会产生200px的距离 display:inline//使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)。

参考资料:百度百科 CSS(层叠样式表)_

定位属性:position:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏

值 描述

absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative 生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit 规定应该从父元素继承 position 属性的值

==========================

浮动:float:

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。

注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

值描述

left 元素向左浮动。

right 元素向右浮动。

none默认值。元素不浮动,并会显示在其在文本中出现的位置。

inherit 规定应该从父元素继承 float 属性的值。

====================

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

再简而言之,float只是行内的 左右的改变,如果后面的元素不清楚浮动clear:both的话 会影响后面元素的位置,而positon定位的影响比较广,既能定义个容器的定位也能定义一个容器里的任意定位,而不是像float一样处于一个平面级的,它是可认识改变的。尤其是position:absolute;和fixed2个都是固定任意位置,一个不随页面滚动而改变原来位置,一个随页面滚动而改变但相对位置不改变。