浮动与清除

浮动

float属性的主要目的，是为了实现文本绕排图片的效果，现在常用于实现多栏布局。

1.文本绕排图片

2.创建分栏

在文本绕排图片的基础上，为段落添加float和宽度，即可创建分栏。

结论： 如果几个相邻的元素都具有设定的宽度，都是浮动的，并且水平空间足够容纳它们，它们就会并列排在一行。

3.围住浮动元素的三种方法

浮动元素脱离了正常的文档流，不能被其父元素所包含，在布局时可能会造成父元素高度塌陷等问题。

• 方法一：为浮动元素的父元素添加 overflow:hidden，强制父元素包含浮动元素。
• 方法二：为父元素设置浮动，使父元素收缩包裹其子元素。
• 方法三：为父元素添加clearfix类

    .clearfix:after {
        content: ".",
        display: block,
        height: 0;
        visibility: hidden;
        clear: both;
    }

定位

• 相对定位(position:relative)
  相对该元素原来在文档流中的位置进行定位，且并不会释放原来位置的空间。

• 绝对定位(position:absolute)
  绝对定位会让元素彻底脱离文档流，释放其在正常文档流中的空间。绝对定位会相对于有定位的最近的祖先元素。

• 固定定位(position:fixed) 固定定位与绝对定位类似，只不过，固定定位会相对于视口（浏览器窗口或手持设备的屏幕）进行定位。