关于浮动的影响及处理方案

一、属性：float，属性值left、right、none

1.     left：元素向左浮动

2.     right：元素向右浮动

3.     none：元素不浮动，默认

二、什么是浮动：所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来，在浮动流中按照新的排列规则进行排列

1.     标准文档流：所谓标准文档流就是页面默认的排列规则，如果是块元素垂直显示，如果是行内元素或行内块元素在一行显示

2.     浮动流：所谓浮动流就是设置了float属性的元素会从标准流中脱离出来，在标准流的上方新建一个层，在这个成里所有元素都是在一行显示的，我们把这种排列规则称为浮动流

三、浮动所带来的影响

1.     设置了浮动属性的元素会从标准流中脱离出来，它会失去在标准流中的原有位置，该位置会被标准流中的其它元素占据

2.     在浮动流中所有元素都是在一行显示的，但是如果空间不够大，那么元素自动换行

3.     浮动的元素自动变成块元素

4.     浮动的元素宽度为最小宽度，所以为了方便控制，通常给浮动的元素加width

5.     浮动的元素会丢失标准流中的原有位置，标准流中的其它元素会占据它的空间，但是文本会对它形成环绕

6.     一个元素在浮动前会分析它前面的元素的类型，如果是块元素，那么这个元素会在块元素的下方显示

7.     元素都向右浮动后，显示顺序为倒叙      

四、父元素的塌陷：如果父元素没有高度，那么此时父元素的高度就是由子元素决定的，如果子元素设置了浮动，那么父元素的高度就会塌陷，父元素的背景色无法显示，另外也会对周边元素造成影响

1.     给父元素设置高度

2.     利用clear属性来清除浮动所带来的影响，clear属性的作用就是清除浮动，属性值为left /right/both/none

1)    left：清除左侧的浮动

2)    right：清除右侧浮动

3)    both：清除两侧浮动

4)    none：默认，不清除浮动

3.     利用:after选择器清除浮动，格式：父元素:after{content:””;display:block;clear:both;}

五、浮动的利用

1.     页面布局

2.     制作页面中各个模块