浮动特点及高度塌陷问题

浮动的简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动
    使用float属性来设置元素的移动
    可选值：none  left right
注意，元素设置浮动以后，水平布局的等式便不需要强制成立
          元素设置浮动以后，会完全从文档流中脱离，不再占用文档流中的位置，所以下边的还在文档流中的元素会自动向上移动

浮动的基本特点

1.浮动元素会完全脱离文档流，不在占据文档流中的位置
2.设置浮动以后的元素会向父元素的左侧或者右侧移动，默认不会从父元素总移出
3.浮动元素向左或者向右移动时，不会超过他前面的其他浮动元素
4.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移（因为此块元素为满足水平布局等式，右一个外边距占据）

简单总结：
 浮动目前来讲他的主要作用就是让页面中的元素可以用水平排列，通过浮动可以制作一些水平方向的布局

浮动的特点

脱离文档流的特点：
   块元素：
           1、块元素不再独占一行
           2、脱离文档流以后，块元素的宽度和高度默认被内容撑开
   行内元素：
           1、行内元素脱离文档流会变成块元素，特点和块元素一样
   脱离文档流以后，不需要区分块和行内元素

浮动元素引起的问题？

- 父元素的高度无法被撑开，影响与父元素同级的元素 
- 与浮动元素同级的非浮动元素会跟随其后 
- 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动/高度塌陷解决的方式如下：

- 给父级div定义 height 属性
-  最后一个浮动元素之后添加一个空的div标签，并添加 clear:both 样式 
- 包含浮动元素的父级标签添加 overflow:hidden 或者 overflow:auto 
- 使用 :after 伪元素。
     .clearfix::after{
         content:' ';
         display:block;
         clear:both;
     }
     通过after伪类向元素的的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加div的原理一样，
     可以达到相同的效果，而且不会再页面中添加多余的div，这是我们最为推荐使用的方式，