css笔记-浮动与定位

boby的margin默认是不为0的。

浮动与定位。

浮动

css中float默认为none。设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是根据盒子的内容来确定。浮动的元素将脱离标准流，后面的元素若不浮动，就会当前面面浮动的元素不存在一样，但文字会围绕前面的浮动元素。若前后两个元素都浮动，它们一起脱离标准流，它们之间的margin就会起作用。

通过浮动，可以调换页面上元素的显示位置。

 

关于clear属性：

• 如果不希望文字围绕浮动的盒子，可以在后面的元素中增加一行clear属性
• clear属性可以设置为left、right、both，表示清除哪边浮动的影响
• clear属性是设置在文字所在盒子里面，而不是浮动盒子里
• 如果某个div内的元素都是浮动盒子，那么div自身显示就会缩成一条，可以在div里面最后加一个空div，将其margin/padding/border设为0，clear设为both，来扩展其高度。

float:left

float:right

定位

position有4个可选值：

static

• 默认值,按照标准流（包括浮动方式）进行布局

relative

• 相对定位，相对盒子原来的位置，通过偏移指定距离，到达新的位置。（指定top/left/bottom/right,top优先于right，top优先于bottom)

• 其仍在标准流中，对父块与兄弟盒子没有影响，即以为它还在原来的位置。
• 对浮动的盒子，使用相对定位也是一样的。

absolute

绝对定位，盒子以它的“最近”一个“已经定位”的祖先元素为基准进行偏移，不存在这种元素时，就以浏览器窗口为基准进行定位。

• 从标准流中脱离出来，意味着对其后的兄弟盒子，就好像它不存在一样。
• 所谓“已经定位”元素的含义是，position属性被设置为不是static的任意一种方式。
• 如果希望某个元素脱离标准流，又保持在原来的位置，可以不设置偏移属性。
  

fixed

固定定位，脱离标准离，以浏览器窗口为基准定准，但IE6不支持。

 

z-index

设置了position属性时，便可以通过z-index设置各块之间的重叠高低关系。

display属性

盒子有两种类型，一种是div这样的块级元素，一种是span这样的行内元素。其实可以通过display属性设置为inline、block来修改原来的属性，none为不显示。