浮动、定位及显示属性

一、浮动与清除浮动

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.