浮动float,定位position理解

浮动,定位可以实现网页的排版

float属性总结
使用场景一:实现网页中并排布局
特点:
实现左右并排时
1、当父元素足够宽度足够时,则依次布局
2、浮动的元素占据空间的宽度就是内容的宽度

缺点:
影响:父元素高度塌陷
原因:子元素

清除浮动方法
1、可以增加父元素的高度
2、可以增加一个空的div,然后让他清除上下左右浮动及clear:both;

position属性总结
使用场景:定位可以使元素固定在某一位置


1、有绝对定位,相对定位,固定定位3中属性


A、绝对定位(要有一个参照点),最好以最近的一个父类元素为参照,让父类元素相对定位
特点:
a、会脱离文档流,原本在文档流占用的空间会释放出来
b、原点计算是根据最近一个有定位的父类元素,如果有定位,就根据body的(0 ,0)定位

B、相对定位
使用场景一:两个元素明显重叠时
a、不会脱离文档流(不会释放原来空间)
b、原点计算根据自己在标准文档流的位置

C、固定定位
a、脱离文档流(内容有多宽,就有多宽)
b、原点计算永远跟着窗口

原文地址:https://www.cnblogs.com/hy-sunny/p/5187001.html