浮动属性（float)

（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>