css 浮动定位

　　浮动

　　元素的浮动是指设置了浮动属性的元素会脱离标准普通
　　流的控制，移动到其父元素中指定位置的过程。
　　语法: float

　　. left

　　　 . right

　　　　. none(默认)

　　　　注意：　　　　　　

　　　　　　 1. 浮动的元素要有父元素
　　　　　　2. 浮动后的元素类似元素行内块元素,如果没有设置宽高,它的宽等同于内容的宽高.即使行内元素浮动后也可以设置宽高.
　　　　　　3. 浮动的元素会脱离文档流,但是没有脱离文本流
　　　　　　4. 兄弟(块级元素)之间要想在一排展示,都要浮动

　　浮动带来的影响　　　　　　

　　　　父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素不能把父元素的高给撑开,导致父元素没有高度,这种现象叫父元素高度塌陷 .
　　　　
　　清除浮动　　　　　

　　　　 1.加固定的高
　　　　缺点:不灵活

　　　　2.额外标签法
　　　　在父元素的末尾加一个空div, 给父元素设置
　　　　clear:left/right/both
　　　　优点：通俗易懂，书写方便
　　　　缺点：添加许多无意义的标签，结构化较差。

　　　　3.父级添加overflow属性方法
　　　　在父元素身上设置 : 除了visible以外的其他overflow的值都可以 , overflow:hidden/scroll/ auto,
原因: 是overflow触发了BFC, 在计算BFC高度的时
　　　　候,浮动的子元素的高度也计算在内
　　　　优点:代码简洁
　　　　缺点 :无法显示需要溢出的元素
　　　　

　　　　4.使用after伪元素清除浮动
　　　　优点 : 结构语义化正确
　　　　缺点 : 由于IE67不支持:after，使用 zoom:1

 .clearfix:after{

 　　content: "";

3　　 display: block;

 　　clear: both;

 }

 .clearfix{

 　　zoom: 1;

 }

　定位

　　1.postion: static 默认值静态定位

　　2.postion : relative : 相对定位

　　　　　　特点 : 不脱离文档流 ,以自身的位置来定位的

　　　　　　应用场景： 1. 微调元素
　　　　　　　　　　　　2.做绝对定位的参考，子绝父相

　　3.position:fixed : 固定定位
　　不管怎么滚动滚动条,始终固定在某个位置
　　特点 : 脱离了文档流,以浏览器窗口来定位的

　　4.position:absolute : 绝对定位
　　特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来
　　说的,如果父元素都没有定位,以html的位置来说的
　　备注 : 已定位的”父元素”可以是绝对定位/ 相对定位/固
　　定定位,子绝父相用的最多

　　方向关键字
　　left : 正值是向右走的
　　top : 正值是向下走的
　　right
　　bottom
　　注意: static定位身上不能用方向关键字

　　脱离文档流的元素
　　1.固定定位
　　2.绝对定位
　　3.浮动
　　特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由内容撑开的,即使是行内元素,可以设置宽高
　　

css 浮动 定位

相关文章