今天继续学习CSS 以下是学习的内容
浮动: 浮动后元素脱离文档流 只有左右浮动没有上下浮动
元素向左浮动：相当于折叠
清除浮动有四种方式
1.父元素设置高度
在.container中加入height:500px;
2.受影响元素加入clear
在.text中加入clear:both;
3.overflow清除浮动
在.container中加入
overflow: hidden;
clear: both;
在.text中加入clear:both;
4.伪对象
在</.head> .container{}后加入
.container::after{
content:””;
overflow: hidden;
clear: both;
}
定位
position
值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使四个方向值进行调整位置 left top right bottom
1.相对定位 中有如下代码
div{
width:200px;
height:200px;
background-color:red;
position:relative;
left:200px;
top:100px;
}
未使用定位 使用定位
2.绝对定位
<head></head>中有如下代码 .box1{ width:200px; height:200px; background-color:red; position:absolute; left:200px; top:100px; } 未使用定位 使用定位该定位可以脱离文档流
设置几层就几层
3.固定定位
.box1{
width:100px;
height:100px;
background-color:red;
position:fixed;
right:100px;
bottom:100px;
}
未使用定位 使用定位 （浏览器偏右下）
基本只用到1个固定定位
该定位随着页面滚动不变
设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。
