定位与浮动

定位:position

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

属性 解释
inherit 从父元素继承position属性的值
static 默认的普通流
relative 相对定位,相对于元素本身正常位置(相对于static)进行定位
absolute 绝对定位,相对于第一个祖先元素进行定位
fixed 绝对(固定)定位,相对于浏览器窗口定位

元素与文档流的关系:

属性 关系
relative 相对定位时,无论元素是否移动,元素在文档流中占据且只占据原来的空间(普通流的空间)
absolute 绝对定位时,元素脱离普通流,定位与文档流无关
fixed 脱离普通文档流,固定在浏览器窗口某个位置

注意:使用绝对定位时,若想相对于某个父元素位置定位,需要给父元素添加属性:position:relative;因为absolute是相对于 static 定位以外的第一个父元素进行定位的。

浮动:float

浮动性质:

当区域块宽度不够时,浮动元素自动下挪;

浮动会让元素脱离文档流,但并非完全脱离: 元素甲添加浮动left后,后面的非浮动元素乙占据了甲的位置,与甲重合,但是乙元素的文本内容会受浮动元素的影响并移动以留出空间。

浮动前:
定位与浮动_第1张图片
浮动后:注意文本位置的变化。
定位与浮动_第2张图片

clear属性:

属性 解释
none 默认值,允许两边都可以有浮动对象;
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许有浮动对象

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素

overflow:hidden

根据属性名字来看,hidden应该是隐藏超过区域块元素(一般是float元素)的内容;但是当外层区域没有设置高度时,使用overflow:hidden会扩充外层区域框的高度,直到把内层元素包含进去。

你可能感兴趣的:(HTML与CSS)