一、定位
1、标准文档流
在HTML文档中,如无任何其他额外规定,元素默认按标准文档流排列,行内元素会一个接一个同行排列,直到排满本行后自动换行;块级元素每一个规定占一整行;每个元素会按其在文档中的位置按顺序排列,此为标准文档流。
2、浮动(float)
脱离标准文档流的一种方式,元素会脱离标准文档流,并尽可能的往浮动方向偏移,直到遇到包含它的元素边框或者其他浮动元素的边框。
3、定位(position)
1)静态定位(static)
默认值。
2)绝对定位(absolute)
绝对定位脱离标准文档流,并根据其父辈的第一个非static的元素定位。
3)固定定位(fixed)
固定定位脱离标准文档流,并根据窗口进行定位。
4)相对定位(relative)
相对定位,元素可以定义偏移,但当前元素的形状不改变,仍然保留原位置。
5)继承定位(inherit)
继承父辈的定位。(IE不支持)
二、BFC原理
1、BFC概念
BFC(block formatting context)块级格式化上下文,可以看成某个元素的特性或者渲染规则,拥有该特性的元素,其内部的元素布局状态不会影响到外部元素的布局状态,相当于该元素内部形成了一个独立的密闭空间
三、形成BFC的条件
- 浮动元素:float属性不为none的元素。
- 定位元素:position属性为absolute或者fixed的元素。
- display元素:display属性为inline-block,table-cells,flex。
- overflow元素:overflow属性为auto,hidden,scroll。
四、BFC的作用
- 消除外边距重叠
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box1 {
width: 100px;
height: 100px;
margin-bottom: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 100px;
background-color: green;
}
这里我们设置红色盒子下外边距和绿色盒子上外边距为100px,盒子高度也为100px,很明显,边距重叠了。BFC原理是让某一个拥有BFC特性的元素内部形成独立封闭的空间,现在我们只需要让其中一个盒子拥有BFC特性不就可以了吗,随便加上一个可以形成BFC特性的属性,
position: absolute;
overflow: hidden;
float: left;
display: inline-block;
以上四中随便一种或者可以形成BFC特性的属性,注意overflow要使用父盒子包裹该元素,在父盒子上使用该属性才行,渲染如下:
边距显示正常了。
2、清除浮动
当我们只给红盒子加上浮动,并且去掉margin属性,根据浮动的特性,红盒子会覆盖绿色盒子,只要给绿色盒子加上overflow:hidden就可以显示出来了,这也是overflow:hidden清除浮动的原理。