一.元素的浮动属性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(浮动)