（1.浮动是一种脱离标准文档流的形式。
作用：浮动就是用来制作多个盒子并排显示，也能设置宽高，负责网页排版
|
1 float:left; 左浮动 2 float:right; 右浮动 3 float:none; 不浮动 |
浮动的元素，会自动贴着父元素盒子的边。
左浮动：贴左边；
右浮动：贴右边；
重点：浏览器认为浮动的元素是不存在(不会占标准流的位置，占浮动流的位置)，所以会影响后面的元素。
2.浮动的注意事项
浮动属性可以理解为一个国家，也有自己的宪法：
|
1、浮动的元素可以设置width、height、margin、padding 2、浮动的元素不区分行块元素，都能设宽高，并排显示，不独占一行 3、浮动的元素不接受display转换显示模式，因为浮动的元素没有行内、块级元素之分 4、浮动的元素如不设置宽高，会自动收缩宽度，会根据内容撑开 5、浮动的元素不占标准流的位置 6、浮动的元素不能设置margin:0 auto;居中 |
3.清除浮动
为什么要清除浮动？
描述：因为子元素浮动了不会被父级包住，儿子都浮动了，就脱离标准流，那么父亲还是标准流，就撑不开高度。如果要让它儿子元素的内容撑开高度，就给父亲清除子级浮动对自己造成的影响。
总结应用场景：当父级没给高度，子级也浮动了，这时就要清除浮动。
1.clear清除浮动属性（清除浮动的墙放在浮动元素父盒子内部的最后。只要子类浮动，就在父类的最后内部添加清除浮动属性）
解决：浮动互相影响，高度自适应
缺点：1、html结构布局，很多要进行浮动，每个浮动的盒子都需要添加一堵墙。页面结构会显得很复杂，出了很多没有意义的标签。
2、一个盒子内的标签要浮动就都浮动，浮动后面的墙是一个标准流元素。
2.overflow属性
盒子内部元素可以设置溢出模式,隐藏或自动显示.
overflow:hidden;
overflow:auto;
overflow属性也能清除盒子内部元素的浮动影响，只需要给受影响的父亲加。
解决了浮动互相影响，高度自适应。
优势：能解决所有的问题，不会增加无用的标签。
注意：如果子元素的内容超出父盒子的范围，内容会被隐藏。
3.伪类清除法
1、定义.clearfix:after类样式
|
1 .clearfix:after{ 2 content:""; 3 clear:both; 4 visibility:hidden;/*占位隐藏*/ 5 height:0; 6 display:block; /*转为块级元素*/ 7 } 8 .clearfix{zoom:1;/*兼容IE6/7浏览器*/} |
2、在受浮动影响的父级盒子添加这个类
|
1 <div class="box1 clearfix"> 2 <p>1</p> 3 <p>2</p> 4 <p>3</p> 5 <p>4</p> 6 </div> |