一、今日学习内容：1.传统网页版布局的三种方式
标准流：标签按照规定好的默认顺序排列
浮动：有很多情况是标准流不好完成或者无法完成的布局，此时使用浮动会更加方便，浮动可以改变元素标签默认的排列方式
典型应用：多个块级元素以行内排列展示
网页布局准则：多个块级：纵向-->标准流，横向-->浮动
语法：float：left、right、none
特性：
浮动元素会脱离标准流
一行内显示并且元素顶部对齐
有行内块元素的特性
不会覆盖自己盒子下面盒子的文字内容，浮动特性就是为了做到文字环绕
浮动元素之间没有空隙 浮动布局注意点
浮动和标准父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
一个元素浮动，其他兄弟元素理论上也要跟着浮动（浮动盒子只影响浮动后面的标准流）
清除浮动：若父盒子没有添加清除浮动，那么子盒子浮动不占位置，父盒子不指定高度，后面的标准流会紧挨着父盒子来进行排列，所以要清楚浮动
额外标签法：
.clear {
clear:both;
}
给父级标签添加overflow属性:
ul {
overflow:hidden;
}
给父级添加after伪元素
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
<ul class="clearfix">
<li></li>
</ul>
父级添加双伪元素
.clearfix:before , .clearfix:after {
content:"";
display: table;
}
.clearfix:after {
clear:both ;
}
定位：
滚动屏幕时，定位可以将盒子固定在屏幕的某位置
某元素可以自由的在盒子内移动位置，并且会压住盒子
定位模式用于指定一个元素在盒子内的定位方式，边偏移决定了元素的最终位置
相对于自己原来位置来进行移动（参照点-->自己原位置）
原来位置标准流位置继续占有，后面盒子仍然以标准流的方式来对待
如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准进行定位
若祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置
|
