HTML的浮动和定位

一.元素的浮动属性float：

选择器{float：left(左浮动) /right(右浮动) /none(不浮动)}

二.为什么要使用浮动：

1. 早期作用：图文环绕。

2. 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右。

3. 任何让div块级元素排成一行：可以使用display：inline-block，但是div之间的空隙会空一格，float的使用可以做到没有空隙。

四.特点：

1. 浮动元素会脱标，在标准流中不占位置。

2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素。

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。

4. 找边缘才停止，顶部对齐。

5. 浮动的元素只会影响下面的标准流，不会影响上面的标准流。

6. 浮动元素具有行内块元素的效果：① 一行可以显示多个 ② 可以设置宽高。

7. 一浮全浮(兄弟元素)，兄弟元素只要有一个浮动，其他的兄弟都要加浮动。

8. 浮动的元素经常搭配标准流的父元素一起使用，注意点： 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中。

五.clear属性清除浮动：

选择器{clear：left(清除左侧浮动) /right(清除右侧浮动) /both(清除两侧)}

六.清除浮动的方法：

1.直接父元素设置高度：内容不确定的情况下不建议设置高度。

2.额外标签法：

<div style=”clear:both”></div>

3.单伪元素清除法：推荐使用，只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度     

 .clearfix::after {

        content: '';

        display: block;

        clear: both;} 

4.双伪元素清除法：比较麻烦   

 .clearfix::before,.clearfix::after {content: '';display: table;}

    .clearfix::after {clear: both;}

5.直接给父元素设置

overflow : hidden

6.overflow属性清除浮动

overflow：hidden

七.定位：

1、static(默认)

当你没有为一个元素(例如p)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。

2、relative(相对定位)

在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。

有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

3、absolute(绝对定位)

如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。

绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

4.fixed（固定定位）:

参考物是浏览器窗口，其特点：脱离文档流、清除子级浮动。

5、float(浮动)