CSS浮动解析

浮动概述

CSS浮动由属性值float来体现，通过浮动可以实现文字环绕的效果

浮动特点

先看下面示例

• 图片未设置浮动时，文字与图片相分离。图片的高度撑满整个div的高度

  
  Paste_Image.png

Paste_Image.png Paste_Image.png

• 图片设置向左浮动后，文字环绕图片，且图片脱离div外，div的高度是由文字的高度撑起来的

  
  Paste_Image.png

Paste_Image.png

从上面示例看出浮动的特点：
1、浮动脱离文档流
我们都知道一个块级元素的高度是由里面所有元素的普通文档流高度总和决定的。通过图2可看出图片浮动后并没有撑满在div里，说明浮动后图片脱离了普通文档流
2、浮动影响页面排版
图片设置向左浮动后，下面的元素会上升填充右边剩余的空间。这就会造成本想位于图片下面的元素跑到了上面。如果想要维持原有排版，这时候就会用到我们接下来要讲的清除浮动

清除浮动方法

清除浮动的原理，不是处理已浮动的元素。而是清除某元素身边的浮动元素，以达到清除其身边浮动元素的目的。具体方法如下：
1、clear：left/right/both
通过clear：left/right/both清除元素左边/右边/左右两边的浮动元素

Paste_Image.png Paste_Image.png

2、使用伪元素
我们都知道，所有的内容元素都有伪元素，所以我们可以利用伪元素的特性来达到清除浮动的目的

Paste_Image.png Paste_Image.png

图片浮动，脱离文档流，div未包裹

Paste_Image.png Paste_Image.png

添加伪元素，包裹图片。
伪元素原理：相当于在父元素里添加一个子元素（默认内联元素），用来清除容器内的浮动元素。
3、父级元素设置overflow:auto/hidden
overflow:auto/hidden，定义了超出父级元素部分是全部包裹显示还是隐藏，所以是可以实现清除浮动的目的。具体如下：

Paste_Image.png Paste_Image.png