CSS 彻底研究(3)-浮动,定位

$1 一 . 浮动 float
$1 I . 定义及规则
float 默认为 none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。
$1 II . 演示规则
准备代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        body
        {
            margin: 0;
            padding: 0;
        }

        #father
        {
            background-color: cyan;

            /*父级div 没有定位 造成子div的margin-top传递给父级*/
            position: absolute;
        }

            #father *
            {
                margin: 10px;
                padding: 10px;
                border: 1px dashed red;
            }

        #son1
        {
        }

        #son2
        {
        }

        #son3
        {
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">#son1</div>
        <div id="son2">#son2</div>
        <div id="son3">#son3-son3son3son3</div>
        <p>
        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字
        </p>
    </div>
</body>
</html>

中间给#father 加上position:absolute,是为了消除未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
显示效果为
1,2 的 float 分别为 left right 时,有

可见 1,2 脱离标准流,标准流中的 son3 当他们不存在,于是 son3 代替原来 son1 的位置,而 son1 的左 border、son2 的右 border 与 son3 的左右 border 重合
当 1,2,3 全都 float left 时

文字围绕着 float 过的 div
1,2 左浮动，3 右浮动，当窗口宽度减小时，3 会被挤下来

当 3 左浮动，2 右浮动的时候，显示为

当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2 么？

答案还是 son3，规则为：写在 html 文件中后面的会被挤下来，在 html 文件中，son3 在 son2 后面，因此总是 son3 先挤下来。
增加 son1 高度，son3 挤下来时会卡在那里
删除盒子中的文字，3 个子 div 全部左浮动
显示为

父 div 中的三个子 div 全部脱离标准流了,父 div 就缩成一条线了,可以用 clear 来修正
加一个 margin-padding-border 全为 0,clear 为 both 的空 div,来撑大父 div

$1 III . clear 清除浮动
如果前面有 float:left 的元素,他会影响下面元素,如上例中的 p,在 p 元素中写 clear : left 即可消除前面左浮动元素对本元素的影响.同理 clear:both 是左右都清除.

$1 二 . 定位 position
position 取值有 static absolute relative fixed
$1 1. static
这个是默认的,即标准流排下来,就是 static 定位方式.

$1 2. fixed
在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是 fixed 做的
练习做个回到顶部玩玩

1	<div id="backToTop">回到顶部</div>

#backToTop {
  width: 100px;
  height: 50px;

  background-color: red;
  color: white;
  cursor: pointer;
  border-radius: 25px 0 0 25px;
  padding-left: 20px;

  text-align: center;
  line-height: 50px;

  position: fixed;
  bottom: 80px;
  right: 0;
}

显示效果

$1 3. relative 相对定位
相对于自己的偏移,而且不脱离标准流,使用 top/bottom left/right 指定偏移量

$1 4. absolute 绝对定位
根据别的已定位元素进行定位,应用 absolute 规则的脱离标准流

这个别的元素:
离它最近的已定位的祖先元素或者浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
已经定位 : 是指 position 已经设置,而且不是 static…即 position 值不为 static 就是已经定位的元素,未设置 position 或设置为 static 认为它没有定位.

Trick
只设置 position : absolute,而不设置 top/bottom/left/right 值,那么元素会保持在原地,但是已经脱离标准流.

$1 三 . display
display 取值有 inline block none
设置为 none，即可将其隐藏，像 inline-block 等新添加的，参考http://www.w3school.com.cn/cssref/pr_class_display.asp

z-index
z-index 值越大,层叠时越靠上.默认为 0,必须为整数,可正可负.当 z-index 相同时,候着覆盖前者.

Magicdawn

CSS彻底研究(3)-浮动,定位

CSS 彻底研究(3)-浮动,定位