css浮动

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

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

    ```css

     .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预留位置，

  右侧列固定同理

- 代码演示