属性float值left right none课堂笔记.pdfVIP

一、属性：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.制作页面中各个模块