一, 什么是浮动
浮动可有三种取值, float:left/right/none, 默认为 none
浮: 漂浮起来脱离文档流, 动: 朝着指定方向移动
元素加了浮动后, 会脱离文档流, 提升了半层层级, 向着指定方向移动, 直到遇到父元素的边界或另一个浮动元素停止
Q1: 什么是层级?
A1: 如果将整个元素看做一层, 则下半层是元素本身(背景样式等), 上半层是元素中的内容
举例:
三个盒子都没有浮动时
当给 box2 添加 float:left 时, 三个盒子的排列变成
此时由于 box2 浮动脱离了文档流, box3 上移, 被 box2 遮挡了.
但此时 box3 盒子里的文字 box3 并没有上移!!!
原因: 上文中有说到, 浮动其实是提升了半层层级, 那么此时 box2 的层级可以遮挡 box3 的小半层 (背景样式等), 但此时 box2 的层级其实和 box3 的上半层(元素中的内容) 在同一层级, 因此, 文字 box3 不会上移.
当增加 box4, 给 box2 和 box4 都添加 float:left 时
Q2: 为什么 box4 没有排在 box2 后面, 而是排在了非浮动元素 box3 的底部之后?
A2: 浮动元素之间是漂浮着, 并不会形成一个流. 浮动元素总是要保证自己的顶部与上一个标准流中的元素 (未浮动元素) 的底部对齐.
Q3: 行类元素 (span 等) 在浮动后为什么可以给宽高?
A3:position:absolute 和 float 会隐式地改变 display 类型, 除 display:none 外, 只要设置了 position:absolute 或 float, 都会让元素以 display:inline-block 的方式显示, 可以设置长宽
二, 清除浮动
2.1. 浮动的缺陷
1. 影响兄弟元素的位置
2. 使父元素产生高度塌陷
2.2.CSS 中清除浮动的属性: clear
2.3. 清除浮动的方法及优缺点
后面再补充
2.4. 清除浮动的实质
上述清除浮动方法可以分为两种
1. 利用 CSS 的 clear 属性, 加 clear:both
2. 触发浮动元素父元素的 BFC, 使该父元素可以包含浮动元素
来源: http://www.bubuko.com/infodetail-3033734.html