浮动与定位

一、浮动 float   

    定义:使元素脱离文档流，按照指定的方向发生移动，遇到父级或相邻的浮动元素就会停下来。    

    值: left.right.none

    特征:                         

    1. 块元素可以在一行显示

    2. 按照一个指定的方向移动，遇到父级或相邻的浮动元素就会停下来。

    3. 行内元素支持宽高

    4. 脱离文档流

        浮动元素后面跟的元素（如果没有浮动）的位置是从前面浮动的元素开始的位置。

        注意：非浮动元素里的内容会留出前面浮动元素的位置（盒模型位置）

    5. 块元素默认宽度会被改变（包裹性）

        块元素不设置宽度，那宽度会由自动变成内容所撑开的宽度

    6. 父级高度塌陷(破坏性)

        子元素有浮动后，那父级元素的不会由子元素的高度所撑开

    7. 换行符不会被解析成空格（并行元素不会有间隙）

        浮动后的元素会脱离文档流，那它就不属于文档流的结构，所以不会解析空格

    脱离文档流:指的是元素不在页面中占位置

    1. 定位是完全脱离文档流

    2. 浮动不是完全脱离文档流

清除浮动 

1、clear

    clear定义： 元素的某个方向上不能有浮动的元素

    值：

    left：元素的左边不能有浮动的元素

    right：元素的右边不能有浮动的元素

    both ：元素的两边都不能有浮动元素

    这个clear清除的代表的相同等级之间的元素影响，并不能解决子级对父级塌陷的影响    

2. <style>
3. .div1{float:left;}
4. .div2{float:right;}
5. .div3{clear:both;}
6. </style>
7. ...
8. <divclass="div1">kaivon1</div>
9. <divclass="div2">kaivon2</div>
10. <divclass="div3">kaivion3</div>

 

   

2、after伪类清楚浮动           

  现在最主流的方法，这个是给父级去消除子级浮动的影响

    after     代表选择到的元素的内容的最后面（因为有些元素没有内容·所以after要配合content）

        after伪类的内容默认是一个行内元素（所以需要它转化为块元素）

    content   设置的内容

1. <style>
2. .parent{
3. border:1px solid #f00;
4. }
5. .box{
6. width:100px;
7. height:100px;
8. background:green;
9. float:left;
10. }
11. .clearfix{
12. content:"";
13. display:block;
14. clear:both;
15. }
16. /* .clearfix{
17. *zoom:1;
18. }
19. 以上这个是满足低选择器*/
20. </style>
21. <divclass="parent clearfix">
22. <divclass="box"></div>
23. </div>

3、其他

    1.给父级添加高度

            有时候不能给父级添加高度的，所以这个方法用不了

    2.inline-block

            用了这个属性，这个元素就没办法居中了。

    3.overflow:hidden;(溢出)

            超出父级的东西直接隐藏,

            如果子级有定位的话，并且这个定位超出了父级的范围，那样的话就看不到了，所以不能加这个命令

    4.空标签

            空标签是没有内容的，但是它的作用是用来清楚浮动的，不符合行为、样式、结构分离的标准

            而且在ie6下标签是一个最小高度19px,解决后也会有2px偏差

    5.br清楚浮动   

与上面问题一样.       

二、定位- 相对定位  

  position               定位

   relative             相对定位

  移动的方向        top、right、botto、left

                        

                      特点 

                      1.只加相对定位，不设置元素移动的位置，元素和之前没有变化。

                      2.根据自己原来的位置计算移动距离

                      3.不脱离文档流，元素移走以后，原来的位置还会被保留

                      4.加上相对定位后，原来的元素本身的特征没有发生变化

                      5.提升层级

1. div{
2. 100px;
3. height:100px;
4. color:#fff;
5. }
6. #div1{
7. background:red;
8. }
9. #div2{
10. background:green;
11. position:relative;
12. left:100px;
13. top:100px;
15. }
16. #div3{
17. background:blue;
18. }
20. <divid="div1">div1</div>
21. <divid="div2">div2</div>
22. <divid="div3">div3</div>

div1

div2

div3

 

二、定位- 绝对定位 

    

      position               定位

      absolute            绝对定位

      移动的方向      top、right、botto、left

                       

                      特点 

                      1.完全脱离文档流。

                      2.行内元素支持所有样式（与加上浮动，或则inlin-block的效果是一样的）

                      3.如果父级有定位，那位置会根据父级移动。

                        如果父级没有定位，那位置根据可视区移动。

                       （用到绝对定位的话，都会给父级加一个相对定位）

                      4.提升层级

                      5.触发BFC

1. body{
3. position:relative;
4. }
5. div{
6. 200px;
7. height:200px;
8. color:#fff;
9. }
10. #div1{
11. background:red;
12. }
13. #div2{
14. background:green;
15. position:absolute;
16. left:200px;
17. top:400px;
20. }
21. #div3{
22. background:blue;
23. position:absolute;
24. top:400px;
25. }
27. <divid="div1">div1</div>
28. <divid="div2">div2</div>
29. <divid="div3">div3</div>

 

div1

div2

div3

 

二、定位- 固定定位 

 

    position               定位

     fixed                固定定位

    移动的方向     top、right、botto、left

                        

                      特点 

                      1.完全脱离文档流。

                      2.行内元素支持所有样式（与加上浮动，或则inlin-block的效果是一样的）

                      3.相对可视区来定位

                      4.提升层级

                      5.触发BFC

                   注意

                      IE6不支持

1. .div1{
2. 100px;
3. height:100px;
4. background:red;
5. position:fixed;
6. right:0;
7. bottom:0;
8. }
10. <divclass="div1">div1</div>

 

 

                     这样设定后的元素就会一直在在浏览器的右下角，无论如何拉动滚动条都不会改变位置

 

三、层级

 

 层级大小由顺序来决定的，后面的元素要比前面的元素的层级要高

 有定位的元素层级会比没有定位的元素层级高

 在都有定位的情况下，层级还是取决于书写顺序（在同一个位置层级高得内容会将层级低的遮盖。）

                           z-index              层级

     它的值是数字,数字越大层级越高（在同一个层里）

1. .box1{
2. z-index:2;
3. }
4. .box2{
5. 150px;
6. margin-top:-50px;
7. background:green;
8. z-index:5;
9. }
11. <divclass="box1">kaivon</div>
12. <divclass="box2">kaivon2</div>

 

四、居中显示

            注意：必须要配合绝对定位，要确定好想要居中的元素他的开始定位位置

1. div{
2. 300px;
3. height:300px;
4. background:green;
5. position:absolute;
6. left:50%;
7. top:50%;
8. margin-left:-150px;
9. margin-top:-150px;/*因为是根据元素的边距计算，所以还需减去元素自身的宽高一半*/
11. /*方法二*/
12. /*left:0;
13. right:0;
14. top:0;
15. bottom:0;
16. margin:auto;*/
17. }
19. <div></div>

 

案例

1. div{
2. border:1px solid red;
3. 300px;
4. height:300px;
5. position:relative;
6. resize:both;
7. overflow: hidden;
9. /*resize:both; 设置元素的大小可以改变（可以拉动）
10. 必须配合overflow:auto使用
11. overflow:auto;如果元素超出父级就出现滚动条*/
13. }
14. a{
15. 100px;
16. height:100px;
17. background:green;
18. text-decoration:none;
19. position:absolute;
20. text-align:center;
21. font:16px/100px "微软雅黑";
22. }
23. #a1{
24. left:10px;
25. top:10px;
26. }
27. #a2{
28. right:10px;
29. top:10px;
30. }
31. #a3{
32. /* left:50%;
33. top:50%;
34. margin-left:-50px;
35. margin-top:-50px;*/
36. left:0;
37. right:0;
38. top:0;
39. bottom:0;
40. margin:auto;
41. }
42. #a4{
43. left:10px;
44. bottom:10px;
45. }
46. #a5{
47. right:10px;
48. bottom:10px;
49. }
52. <div>
53. <ahref="#"id="a1">a1</a>
54. <ahref="#"id="a2">a2</a>
55. <ahref="#"id="a3">a3</a>
56. <ahref="#"id="a4">a4</a>
57. <ahref="#"id="a5">a5</a>
58. </div>