浮动特性总结

1.6、浮动特性总结

• 脱离文档流

• 提升层级

• 对块元素的影响

  • 使块元素在一行排列

  • 未定宽度的块元素适应内容

• 对行内元素的影响

  • 生成了一个块级框即 （1）支持宽高 （2）支持垂直方向的margin,padding （3）支持行高、text-align等文本属性

• 脱离文档流不脱离文档流

1.7、浮动特性应用实例

1.7.1、 应用实例图文绕排

• 总结：浮动脱离文档流不脱离文本流

• 扩展了解： 最初只用于在成块的文本内浮动图像，现在它已成为在网页上创建多列布局的最常用工具之一

• 代码演示

1.7.2、两列自适应

• 实现要点：单列定宽，单列自适应

• 浮动实现

  说明：左侧列固定，左侧浮动，右侧列使用margin-left预留位置， 右侧列固定同理

• 代码演示