浮动

常用布局

页面中布局的方法：
float（浮动布局）、position（定位布局）、弹性盒布局(CSS3)（flex布局）
制作页面最常用的是float布局。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100420272591.png#pic_center

浮动相关属性

float: left | right ;
left： 左浮动；
right： 右浮动；
示例：

向左浮动

.div1{float:left;width:100px;height:100px;}

####浮动的原理及特性

float 先浮后动（水槽原理）

所有的元素都可以浮动
具有float属性的元素在父标签中是不占空间的
float能解决标签之间有间隙的问题

浮动的特性

float 对行内属性标签和块属性标签的影响
float 对行内属性标签的影响
float之后能设置width和height属性，并支持margin和padding属性
float 对块属性标签的影响
a：在没有设置宽高的情况下浮动后，内容撑开宽度高度
b：可以使块属性元素并排排列

clear 清除浮动

clear：both
both： 不允许有浮动
清除浮动的一种用法

.clear{clear:both;} 使用情况：由于元素的float，为了不影响下面元素的显示。通常在这个浮动元素的后面加上

来消除对后面元素显示的影响。

ie6下清除浮动

下面这种清除浮动的方法在ie6下，div空标签会有默认高度。

.clear{clear:both;}

解决方法：
.clear{clear:both;overflow:hidden;height:0;}

overflow 属性

overflow：visible | hidden | auto | scroll

visible：默认属性,显示超出内容，不剪切内容也不添加滚动条
hidden：超出内容隐藏
Auto：在需要是剪切内容并添加滚动条
scroll：总是显示滚动条

还可针对x轴和y轴设置
overflow-x：
overflow-y：
overflow：hidden； 也可以清除浮动
如果一个父标签内有float的子元素，给父元素设置overflow：hidden属性，则可以清除子元素的浮动。
示例：

如果.div1和.div2都有浮动，那么给.out设置overflow:hidden; ,
即可清除 .div1和.div2的浮动。

visitility 可视

visibility：visible | hidden
visible： 元素是可视的
hidden：元素不可视的

浮动元素的渲染

浮动的问题及清理

定位

定位相关属性

Tips：relative：相对定位元素参照自身起始位置移动，并占据原有空间。
absolute：绝对定位元素参照最近的已定位父元素移动，不占据空间。
fixed：固定定位元素参照浏览器移动，不占据空间

相对定位:relative

定义：元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置。

绝对定位:absolute

定义：根据最近的拥有定位属性（非static）的父元素进行偏移，如果没有该父元素则根据文档偏移。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

固定定位:fixed