Float 的的设计初衷
Float 的设计初衷仅仅是为了实现文字环绕效果,所以了解了 Float的设计初衷,我们就能明白 Float的特有的行为表现了
包裹和破坏
增强浮动的感性认知
包裹
包裹的特性的是
- 坚挺
- 收缩
- 隔绝
这种特性称之为 BFC, 具有这种包裹性的元素有
- display:inline-block / table-cell
- position: absolute/fixed/sticky
- overflow:hidden/scroll
破坏
如果浮动元素是某一个元素的父元素,那么子元素就会溢出父元素,而父元素将会塌陷
清除浮动
清除浮动是一种简称, 较为确切的说是清除浮动带来的影响
第一种办法 clear
clear 通常应用形式
- HTML block 水平元素底部
- CSS after 伪元素底部生成 :但是用该方法会在 IE6/7中出现兼容问题
第二种办法 BFC/haslayout
两种办法的优缺点:
clear: 会发生 margin 重叠现象 BFC: 清除浮动,则会把这个元素包起来,从而不会发生 margin 重叠的想象.
Float布局的应用场景和优缺点
float 本身就是用来实现文字环绕图片效果的,不适合应用在布局上 缺点:
- 容错性差, 耦合高,其中某一浮动元素出现问题,其他也会受到影响
- 兼容性差, 在 IE 某些版本浏览器上会出现问题
- 必须有固定的布局
