css浮动布局,了解一下

float浮动

none 默认值不浮动
left
right
inherit 继承父元素的float

block（块）元素的特点：

①总是在新行上开始；
②高度，行高以及外边距和内边距都可控制；
③宽度缺省是它的容器的100%，除非设定一个宽度。
④它可以容纳内联元素和其他块元素

---

块级元素不设置宽度之后使用浮动
就会根据内容进行自动调整

设置浮动元素会脱离正常的文档流
设置浮动之后在y \ z 轴上就会浮动起来
父元素的高度就会变为0

浮动的元素脱离了文档流
但是里面的内容仍然占据空间
会根据相对位置进行布局

清除浮动

clear:both //清除两侧的浮动

定位

position:
static 默认属性
relative 可以通过设置偏移量和z-index来控制相对于其正常位置进行的便宜
absolute 相对上一个不为static的父元素进行绝对定位,如果不指定父元素的position,将相对于整个html文档进行绝对定位
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位,不论网页如何滚动,该元素始终停留在屏幕的某个位置上
inherit 继承父元素的定位属性