浮动

想要理解浮动，首先要明白什么是文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的特点
	块元素
		1.块元素在文档流中会独占一行，块元素会自上向下排列。
			元素在文档流中默认宽度是父元素的100%
		3.块元素在文档流中的高度默认被内容撑开
	内联元素
		1.内联元素在文档流中只占自身的大小，会默认从左向右排列，
			如果一行中不足以容纳所有的内联元素，则换到下一行，
			继续自左向右。
		2.在文档流中，内联元素的宽度和高度默认都被内容撑开	

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流

使用float来使元素浮动，从而脱离文档流
	可选值：
		none，默认值，元素默认在文档流中排列
		left，元素会立即脱离文档流，向页面的左侧浮动
		right，元素会立即脱离文档流，向页面的右侧浮动
			  
当为一个元素设置浮动以后（float属性是一个非none的值，元素会立即脱离文档流，
        元素脱离文档流以后，它下边的元素会立即向上移动
	元素浮动以后，会尽量向页面的左上或这是右上漂浮，
	直到遇到父元素的边框或者其他的浮动元素
	如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
	浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
	浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

浮动的缺陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。

解决方法

1. 我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

2. 将overflow设置为hidden是清除浮动的一种方式。

    overflow: hidden;
   

   但这种方法有时候会将子元素在父元素中超出的内容自动设置为不显示，有时候不方便我们操作页面。

3. 我们可以清除掉其他元素浮动对当前元素产生的影响，使用clear来完成功能

    clear可以用来清除其他浮动元素对当前元素的影响
    	可选值：
    		 none，默认值，不清除浮动
    		 left，清除左侧浮动元素对当前元素的影响
    		 right，清除右侧浮动元素对当前元素的影响
    		 both，清除两侧浮动元素对当前元素的影响
    	如果同时受到同一方向上的不同影响，clear会清除对他影响最大的那个元素的浮动
   

4. 使用伪类选择器解除高度塌陷的问题（推荐使用）

    .clearfix:after{
    	content: "";
    	display: block；
    	clear: both;
    	}