web前端day09学习

一、float浮动
可以左右移动，但不可以上下移动
浮动元素会脱离普通流
元素浮动后具备inline-block（行内块元素）属性
高度塌陷：
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题、

解决高度塌陷的方法：
1、清除浮动语法：
clear:none|left|right|both;
注意：设置了float的元素会影响其他相邻的元素，需要使用clear清除浮动，
clear只会影响自身，不会对其他相邻的元素造成影响

清除浮动常用的方法：
1、在浮动元素后使用一个空元素
例如：<div class="clear"></div>

2、给浮动元素的容器添加overflow:hidden;
*zoom:1;/*触发hasLayout兼容ie6、7*/

3、使用CSS3的：after伪元素、

清除浮动的其他方法：
1、父级元素定义height。只适合高度固定的布局
2、父级元素也一起浮动。不推荐，会产生新的浮动问题

二、CSS定位（position）

定位模型：
stati自然模型
relative相对定位模型
absoulate绝对定位模型
fixed固定定位模型
sticky磁贴定位模型

 

position属性值
作用：可定位的祖先元素
特点：他的绝对定位的后代都可以相对于他进行绝对定位
相对定位的元素不会离开常规流

absoulate属性值
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed属性值
固定定位元素不会随着视口滚动而滚动

sticky（磁贴定位）：
作用：relavtive+fixed的完美结合，制造出吸附效果