css浮动与定位
在介绍css浮动与定位之前，先来了解一下文档流和非文档流
文档流
文档流，是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
标准流的特点：1.块级元素从上到下，独占一行
2.行内元素，行内块级元素从左到右在一行中显示。
3.占位置。
非文档流
网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。
float
一、浮动 （float）
会使元素向左或向右移动，其周围的元素也会重新排列。
语法： float:none/left/right;浮动指：
- 将元素排除在普通流之外
- 元素将不在页面中占据空间
- 将浮动元素放置在包含框的左边或者右边
- 浮动元素依旧位于包含框之内
浮动的特点
- 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
- 浮动元素的外边缘不会超过其父元素的内边缘
- 浮动元素不会互相重叠
- 浮动元素不会上下浮动
- 行内元素浮动后会变为块级元素
举个例子
当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边框碰到包含框的左边缘
为了验证框二是否隐藏，我加了个margin属性设置为10px，可以看出确实隐藏在下面
具体实现代码：仅供参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width: 500px;
height: 500px;
background-color: pink;
}
.content div{
width: 100px;
height: 100px;
margin: 10px;
}
.item1{
float: left;
background-color: red;
}
.item2{
background-color: green;
}
.item3{
background-color:blue;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>包含框中有三个元素，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边框碰到包含框的右边框
如果把三个框都向左移动，那么框1向左浮动直到遇到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框在同一行显示
如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间（左图） 如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素卡住（右图）
CSS 清除浮动：
描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。
属性：clear 值：left、right、both
清除浮动的常用方式：
1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
2.浮动元素的父级div定义 伪元素::after （content: ""; display: block; clear: both;)
3.浮动元素的父级div定义 overflow:hidden
4.浮动元素的父元素定高
display
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。
块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。
display常见属性值
1. none：隐藏对象
2. inline：指定对象为内联元素
3. block：指定对象为块元素
4. inline-block：指定对象为内联块元素
5. table-cell：指定对象作为表格单元格
6. flex：弹性盒
举个栗子：
如果把三个框都行内块显示
position 定位
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间
绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
用一句话概括就是：子绝父相
固定定位
fixd：固定定位，相对于浏览器窗口进行定位，脱离原来的文档流
z-index堆叠顺序
- 一旦修改了元素的定位方式，则元素可能会发生堆叠
- 可以使用z-index属性来控制元素框出现的重叠顺序
- z-index仅能在定位的元素上生效
- z-index属性： 值为数值，数值越大表示堆叠顺序越高，即离用户越近 可以设置为负值，表示离用户更远 ，一般不要设置
关于css浮动与定位就说到这里了，如有不足之处，欢迎指正！
感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。
- 点赞
- 收藏
- 关注作者
评论（0）