如何使用html的定位position和浮动float

Posted 2020-08-07

语法：

position：static （静态定位） |  absolute （绝对定位） |  fixed （固定定位） |  relative  （相对定位）

属性参数：

static：静态定位，无特殊定位，对象遵循html定位规则（html的默认状态）

absolute：绝对定位，对象脱离文档流，需要使用 left、top、right、bottom等属性进行精确地定位。可以运用z-index属性进行层叠。（使用绝对定位时如果出现元素飘动，没有在你指定的位置上，可以在元素的父级元素上使用相对定位。“个人建议”）

relative：相对定位，对象不脱离文档流，无法像absolute一样进行层叠，但依然要使用 left、top、right、bottom等属性进行正常文档流中相对原来的对象位置进行移动，原位会被其他元素占据。

fixed：固定定位，脱离文档流，可以使元素在屏幕上保持固定位置，即使滚动条下拉元素位置也不会改变。

<div  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是div111111</div>

    div111111会向下移动150px、向右移动200px处

<div  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是div222222</div>

　　div222222会向移动到距离底部150px、距离右边框100px处

当你要做一个始终在页面右下角显示的模块时使用  position：fixed；bottom：50px；right：50px；可以使div在距离底部50px和右边框50px处显示且不管你的页面怎么改变，div一直会显示在你可视范围内的相同位置

z-index：100px；后面跟的像素越大div所在的层级越高

语法：

float：left  |  left  |  none；向右、向左或者 不使用（默认）

float：脱离文档流，浮动是相对于父级元素进行的浮动

<div  id="div1">

　　<div  id="div2"></div>

</div>

如上：div1为div2的父级元素div2只能在div1里面进行浮动

浮动的一个经常使用的情形，就是水平导航条的运用。水平导航条有两种方式可以实现，只要将 li 标签的display属性改为行内样式，就可以让列表平铺，这是核心部分，但是在了解盒子模型我们可以知道，行内标签的  margin、padding对上下方向是无效的，这里只能让列表选项的左右拉长，上下是不会被控制的，块级标签上下才会被控制。

float也是简单的一些文字环绕图片效果的运用将图片和文字放入同一个div内然后给图片和div一个float：left  |  right；

<div   style="width:220px;height:300px;float:left;">

　　<img  src=".."   style=" float:left;"/>这里是文字654651进行图文混排以及文字环绕kj dsh gkjh kjh jb kjf bg kjs dh fkj gh kj sd hjf hk jk jsh kjg hk

</div>