关于Position和float的一些问题

前端

一、HTML布局的基本要点

1.盒子模型：

1.盒子模型分为两种：块状元素（block）和行内元素（inline），盒子模型中的block和inline是display属性的父类，比如display属性值list-item属于block。
2.两种盒子模型的区别：
1）块状元素有width和height属性，行内元素没有这两个属性
2）块状元素独占一行
3）块状元素的width默认为100%，而行内元素则根据自身的内容及子元素来决定宽度

2.HTML普通流：

在不改变元素的默认样式的前提下，元素在HTML的普通流中会占用一个位置，而位置的大小则由元素的盒子模型来决定

二、Position属性

（重点在于应用了不同的position属性值后是否会脱离文档流和改变display属性值）
元素的定位方式是由position和display属性共同决定的。
1.static：
元素默认的position属性，top、left等值无效
2.relative：
相对定位使元素偏离默认位置，但在普通流中依然保留原有的默认位置（不会被其他元素占据），并没有脱离普通流，只是视觉上发生了变化。给元素添加position属性并不会改变元素的display属性。
3.absolute：
如果父元素有定义position属性，则以父元素以基准进行偏移；如果没有则以body为基准进行偏移。
1）块状元素在position为relative或者static的情况下，设置width:100%,在position变为absolute后，width变为auto（自适应父元素的宽度）
2）元素在设置了position:absolute后，若没有设置top、bottom等属性，则自动变为auto，即在普通流中的位置。
3）应用了position:relative/absolute的元素，其margin属性值仍然有效
4）position:absolute忽略父元素的padding
5）在IE6/7中设置position属性会导致z-index属性失效
6）应用了position:absolute的元素会脱离页面中的普通流并改变display属性。
7）默认覆盖到非定位元素上，除非改变z-index值
4.fixed：
1）改变行内元素的display属性，使之变为block
2）是元素脱离普通流，不占空间
3）默认覆盖到非定位元素上
4）根元素为浏览器窗口，始终以浏览器窗口为基准进行定位

三、Float属性

1.元素应用了float属性后将脱离普通流，其父容器得不到脱离普通流的子元素高度
2.将元素的display属性值变为block
3.浮动后一个元素围绕浮动元素（类似文字围绕），浮动前一个元素不受影响

四、Float和Position相互关系

1.元素同时应用position:relative(top/left/bottom/right)和float属性后，会先浮动到相应的位置，然后根据(top/left/bottom/right)值发生偏移
2.元素同时应用position:absolute和float属性后，float会失效

使相关属性变为：auto，就能自适应高度或者宽度