CSS 浮动

 

## 概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，

## 浮动的概念

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

## 标准流（普通文档流）

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

```html

浮动

        float: left; 左浮动，标签向左浮动

        float: right;右浮动，标签向右浮动

        float: none;不浮动，默认值，并且会显示在其文本中出现的位置

        浮动特性：

        1.浮动元素脱离正常标准流不脱离文本流

        2.浮动元素不占位，父级盒高度为零

        3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行

        4.使行级标签支持宽高

        5.提升层级

 

 注意：元素浮动后类似于行内块标签（没有行内块的间隙问题），在一行内展示，可以设置宽高。

```

## 浮动产生的问题（为什么要清浮动）

- 子元素浮动会脱离正常标准流，会导致父元素高度塌陷

- 影响之后元素的布局

## 清浮动的方法

```html

清除浮动的方法

        1.给浮动元素的父级盒子设置一个固定的高度

          优缺点：不够灵活，适用于高度固定的布局中

        2.为浮动元素的父级盒子设置浮动

          优缺点：会产生新的浮动问题

        3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto

          优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁