浮动&定位

本文地址：http://www.cnblogs.com/veinyin/p/7606652.html 

 

浮动和定位能够让我们把一些元素放到理想的位置，当然，相比之下 float 只能浮动到左边或右边，而定位可以定位到任意位置，两者各有优劣，在使用时要考虑具体情况，选择最适合的。

还记得曾经练习布局的时候把整个页面使用 position 做完了.... 还好那个是固定长宽而且元素不太多，想想就觉得自己真是太奇葩了....

以下是正文~~似乎好多都是常识？ 

1 浮动 ( float )

• 浮动元素周围的外边距不会合并，而且它还会产生一个块级框

• 浮动元素顶点不能超过之前所有浮动元素的顶端

• 浮动元素的顶端不会超过顶部行框

• 浮动元素不会不会发生重叠的现象，上面有浮动元素了就浮动到它下面，左边有浮动元素了，就紧挨着浮动到右边，就这样简单，真是棒极了。定位才不会有这么好的默认效果呢，一不注意就重叠了。

• 浮动元素必须尽可能的向左或向右，而且会尽最大可能放到最高的地方。

• 浮动元素可以设置外边距来微调位置,但这样有可能与内容重叠

  1 img{
  2     float: left;
  3     margin: 10px -15px 10px 10px;
  4 }

   

　　 重叠的结果有两种可能：

　　 1. 其后是一个行内框。 行内框所有内容聚在浮动元素之上显示

　　 2. 其后是一个块框。 块框内容在浮动元素之上显示，其余如边框、背景在浮动元素之下显示

• 清除浮动。 在不想要其左侧或右侧有浮动元素的 CSS 中加上

  1 clear: left;        //或 right 或 both

   

2 定位 ( position )

• 最大最小属性

  max-width , max-height , min-width , min-height

　　可以使窗口最大不超过多少或最小不低于多少,可以是数值也可以是百分数。

• 内容溢出 ( overflow )

  visible ， hidden ， scroll ， auto

　　visible 是默认值，超出了元素框的内容仍会显示。 hidden 仅显示元素框内的内容。 scroll 显示元素框内的内容，但会提供一个滚动条，使用户有途径访问超出元素框的内容。 auto 由浏览器决定如何做，一般会选择给滚动条。

• 裁剪 ( clip )

  rect( top , right , bottom , left) 或 auto

　　要用都好隔开四个值且这些值不能为百分数。如果值为 auto， 则默认为0.

• 元素可见性 ( visibility )

  visible （ 可见 ）, hidden （ 隐藏，但保留其空间 ）, collapse 

END~~~≥ω≤