鸩羽千夜

06float&position.md

goer ... 2022-01-05 Css
  • Css
 大约 2 分钟
浮动和定位

[toc]

# 1.浮动

元素是否浮动显示。float

浮动的时候元素的显示属性也变化了 变为 “行内元素”

value expalin
left 向左浮动
right 向右浮动
none 不浮动

浮动元素，脱离文档流，会影响后面的元素

clear 清除浮动,每次浮动之后必须设置清除浮动 值： left 清除左浮动 right 清除右浮动 both 清除所有浮动

1.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。
<div style="clear:both"></div>
<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>
这样会添加和多无意义的标签

2. 父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。
推荐这样做
.clearfix{
	overflow:hidden;(父盒子里还有position定位会引起麻烦)
}

3.这种最常用：
<div class="clearfix">
   <div style="left"> </div>
    <div style="left"></div>
</div>
<style>
    .clearfix::after,clearfix::before{
        content:""
        dispaly:table;
    }
    .clearfix::after{
        clear:both;
    }
    .clearfix{
        *zoom:1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 2. 定位

元素定位，position

# value:

  1. static(默认)

    静态定位的元素,没用定位，遵循正常的文档流对象。

  2. fixed(固定定位)

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动：

    div{
    position:fixed;
    bottom:0;
    right:0;
    //一直在右下角
}
    1
    2
    3
    4
    5
    6

  3. relative(相对定位)

    相对定位元素的定位是相对其正常位置,

    移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。
一般父元素用相对定位，子元素用绝对定位
父相子绝
1
2
3

  1. absolute(绝对定位)

    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html:

    脱离文档流，可以到父盒子的任何地方

<style>
div{
    postion:relative;
}
img{
    postion:absolute;
   	bottom:0;
    right:0;
}
p{
    position:absolute;
    top:0;
    left:0;
}
img图片在盒子div的右下边，p文字在坐上边
</styel>
<div>
	<img src="one.jpg">	
	<p>go</p>
<div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  1. sticky(粘性定位)

position: sticky; 基于用户的滚动位置来定位。依赖用户的滚动

哈哈，很帅的(也很常用)

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50; 
}
1
2
3
4
5
6
7
8
9
10

07reset&media.md