一、浮动与清除浮动
1、最初的思想:文字绕排。
2、延伸:实现多栏布局。
3、清除浮动的方法:
(1) 给父元素设置overflow:hidden
(2) 同时浮动父元素
(3) 对要清除浮动的元素增加clear:both样式
(4) 增加新的元素,给该元素设置clear属性来清除浮动
(5) 对于浮动的元素增加after伪元素
#div1::after{
content:'';
display:block;
height:0;
visibility:hidden;
clear:both;
}
Note:
浮动之后的元素会脱离常规文档流,但其他元素中的文字会包围在其四周。
(绝对定位完全不占据空间)
两个div如果想让后面的div在前面div的右侧,需要对后面的div也进行浮动。
二、定位
position:static relative absolute fixed
默认值为static
1、static
按照顺序进行布局的方式,在原文档流中的位置。
2、relative
relative相对于原来在文档流中的位置。
3、absolute
相对于上一个非static定位的父元素进行定位。
4、fixed
相对于视口进行定位。
三、显示属性
display属性的值:block、inline、inline-block、none.