css布局

1、css浮动

概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。

1.1、浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。

1.2、浮动属性

• float

  • left 左浮动

  • right 右浮动

  • float:none 不浮动(默认值)

1.3、浮动的基本特性

• 可以使块元素在一行排列

• 脱离文档流

• 提升层级

【综合案例】京东首屏画块

1.4、浮动的问题（为什么要清浮动）

• 子元素浮动导致父元素高度塌陷

• 影响之后元素的布局

1.5、清浮动的方法

解决问题即清除动的方法

• 父元素固定高度法

  • 描述：给浮动元素的父元素固定高度

  • 缺点：不够灵活

  • 代码演示

• 父元素overflow方法

  • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现

  • 缺点：可能会隐藏内容或触发不需要的滚动条

• 额外标签法

  • 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both

  • clear属性说明

    • 作用：清除浮动

    • 取值

      • left

      • both

      • right

        提示通常使用both!

  • 缺点：代码冗余，影响代码可读性

• 伪元素:after

  • 描述：给浮动标签的父标签添加

     .clearfix:after{
           content:"";
           display:block;
           clear:both;
    }

  • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

  • 作为通用代码总结

1.6、浮动特性总结

• 脱离文档流

• 提升层级

• 对块元素的影响

  • 使块元素在一行排列

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

• 对行内元素的影响

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

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

1.7、浮动特性应用实例

1.7.1、 应用实例图文绕排

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

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

• 代码演示

1.7.2、两列自适应

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

• 浮动实现

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

• 代码演示