网络日志

css浮动和定位

一、浮动

浮动可以改变元素的排列方式
float  left/right/none;

撑开盒子:
不给高度可以撑开盒子,
问题:
但是浮动之后高度就会变成0(没给高度)导致错位(浮动元素不再占有原文档流的位置,对后面的排版产生影响)
解决:清除浮动(清除浮动元素产生的影响)
clear:left/right/both

1.额外标签法(w3c推荐的写法)
在后面添加一个块级元素不能是行内元素:<div style="clear:both"></div>
缺点:添加了无意义的标签

2.overflow
给父元素添加overflow属性
overflow:hidden/auto/scroll
缺点:无法显示溢出的部分

3.:after伪元素法
给父元素添加
本质:自动生成一个额外隐藏标签

4.双级伪元素

二、定位


定位 = 模式+边偏移
定位模式:
position:static/relative/absolute/fixed

边偏移(用来操作定位的):
top/left/right/bottom


1.static 静态模式(了解)
按照标准流摆放位置,没有边偏移,很少使用

2.relative 相对定位(重要)
    1.相对于原来的位置移动
    2.原来的位置继续保留,后面的盒子依然按照标准流来对待它

3.absolute 绝对定位(重要)
元素在移动位置的时候,是相对于它祖先元素来说的
特点:
    1.如果没有祖先元素或者父元素没有定位,还是以浏览器为准进行移动定位
    2.父级有定位(非static模式),则参考最近一级有定位祖先级元素为参考点进行位置移动
    3.绝对定位不再占有原来的位置(轮播图上的<,>,...)

子绝父相
父占有位置,保留原来的位置使用相对定位,子随意摆放不占有原来的位置

4.固定定位
fixed