第7章浮动(1.5课时)

关键词

• float
• overflow
• clear

浮动

写法：float:left|right
特点:

给一个元素设置了浮动后，该元素不占位置（脱离标准流）
给一个元素设置了浮动，会影响该元素后面的元素
浮动可以让块级元素在一行上显示
浮动可是实现模式转换（span 设置浮动可以设置宽高）
浮动作用:

浮动最初的作用： 解决文字图片环绕效果。（文字不会浮动的影响）
制作网页导航（浮动+列表实现导航）
进行网页布局 （div+CSS(盒子模型+浮动+定位)）
注意：
◆让块级元素在一行上显示就使用浮动
◆如果一个元素要实现模式转换，就使用display

让第一个浮动

第二个也浮动

第三个也浮动

第二个右浮动

浮动常用的三个属性：float:left|right|none 默认none

塌陷：
外层div没设置高度，如果不是全浮动，那么会由内容自动撑开father的高度，但如果里层div全浮动，会导致father塌陷了。

塌陷是病，怎么治呢？
有两种治法。
第一种治法，除了上面的div,再做一个空的div，在该div的样式设置时，设置清除浮动
第二种治法，在father的css里，设置overflow:hidden 会触发重新计算div的高度