css浮动float:left|right

浮动

1.浮动是什么

是一种css的样式
div{ float:left;//right }

1.可以让元素脱离文档流 取消在标准流中所占的位置
2.如果是left 靠近父元素的左边排列 如果是right 靠近父元素的右边排列

2.为什么要用浮动呢

进行水平排列
常见的元素 --行内元素 和块级元素
行内元素 水平排列 共同占一行但是不具有宽高属性
块级元素 垂直排列 单独占一行具有宽高属性
你会发现 无法满足 一行 放两个有宽高的排列方式
浮动不同 —浮动规则

1. 浮动会脱离文档 --父元素不会计算它的宽高
2. 浮动的元素带有宽高 例如span 浮动后 可设置宽高
3. 浮动的层级在普通文档流之上 会产生遮盖效果
4. 浮动会一行排列 当一行放不下就会换行

3.怎么做

<div class="fa">
    <span>我是</span>
    <span>我是</span>
</div>

给对应的元素 添加浮动的样式

span{
    float:left
}

4.会怎样

实现并列的排布
在一行中可以 左边一个元素可以设置大小 右边一个元素可以设置大小
常见的应用 :圣杯布局 双飞布局 左右排列

5.浮动产生的问题

1.浮动会脱离文档 --父元素不会计算它的宽高

<div class="fa">
    <span class="a">我是</span>
    <span class="b">我是</span>
</div>

情况一 a浮动 b 不浮动

当第一个span a浮动后  脱离文档流
父元素不再计算它的位置
第二个span 就会忽略它 成为fa的第一个元素
此时父元素fa的高度 就是b的高度

情况二 b浮动 a 不浮动
当第一个span a不浮动
将第二个span b浮动后 脱离文档流 从原地飘起 层级提升
父元素不再计算它的位置
b后面存在的元素会取代它的位置 向上移动 替代它的位置
此时父元素fa的高度 就是a的高度

情况三 b 浮动 a 浮动
当两个span 都浮动后 那么fa的高度将会为零
也就是高度塌陷
如何解决
请看下回—更新中