css浮动和定位

一、浮动

浮动可以改变元素的排列方式
float  left/right/none;

撑开盒子：
不给高度可以撑开盒子，
问题：
但是浮动之后高度就会变成0（没给高度）导致错位（浮动元素不再占有原文档流的位置，对后面的排版产生影响）
解决：清除浮动（清除浮动元素产生的影响）
clear:left/right/both

1.额外标签法（w3c推荐的写法）
在后面添加一个块级元素不能是行内元素：<div style="clear:both"></div>
缺点：添加了无意义的标签

2.overflow
给父元素添加overflow属性
overflow:hidden/auto/scroll
缺点：无法显示溢出的部分

3.:after伪元素法
给父元素添加
本质：自动生成一个额外隐藏标签

4.双级伪元素

二、定位

定位 = 模式+边偏移
定位模式：
position：static/relative/absolute/fixed

边偏移（用来操作定位的）：
top/left/right/bottom


1.static 静态模式（了解）
按照标准流摆放位置，没有边偏移，很少使用

2.relative 相对定位（重要）
    1.相对于原来的位置移动
    2.原来的位置继续保留，后面的盒子依然按照标准流来对待它

3.absolute 绝对定位（重要）
元素在移动位置的时候，是相对于它祖先元素来说的
特点：
    1.如果没有祖先元素或者父元素没有定位，还是以浏览器为准进行移动定位
    2.父级有定位(非static模式)，则参考最近一级有定位祖先级元素为参考点进行位置移动
    3.绝对定位不再占有原来的位置（轮播图上的<,>,...）

子绝父相
父占有位置，保留原来的位置使用相对定位，子随意摆放不占有原来的位置

4.固定定位
fixed