浮动

浮动

一、浮动定位概述

所谓的定位，实际上就是定义元素框相对于其正常位置，应该出现的位置在哪。简单的说，定位就是改变元素在页面上的默认位置。
可以分为五类分别为：
1、普通流定位(元素默认的定位方式)
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
下面我们就来详细的说一下

二、普通流定位

普通流定位，又称为" 文档流定位"，是页面元素的默认定位方式；
页面中的块级元素按照从上到下的方式排列，而且每个元素独占一行；
页面中的行内元素按照从左到右的方式排列，当前行显示不下所有行内元素时，会自动换行。

三、浮动定位

作用：能够让多个块级元素在一行内显示。
1、浮动定位概述
如果将元素的定位方式设置为浮动定位，那么将具备以下几个特点：
（1）、浮动元素会被排除在文档流之外即脱离文档流，元素不再占据页面空间，其它未浮动元素要上前补位；
（2）、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上；
（3）、浮动元素只会在当前行内浮动；
（4）、浮动元素依然位于父元素之内；
（5）、浮动定位处理的问题-让多个块级元素在一行内显示。
下面说一下语法
2、语法
它的属性为： float
取值为：
（1）、none
它的默认值，即无浮动定位效果。
（2）、left
左浮动，让元素停靠在父元素的左边，或
停靠在左侧已有浮动元素的边缘上。
（3）、right
右浮动，让元素停靠在父元素的右边，或
停靠在右侧已有浮动元素的边缘上。
3、浮动引发的特殊效果：
（1）、当父元素的宽度显示不下所有的已浮动子元素时，最后一个将换行(有可能被卡住)
（2）、元素一旦浮动起来之后，那么宽度将变成自适应(非人为指定情况下)
（3）、元素一旦浮动起来之后，那么将变成块级元素，尤其对行内元素影响最大；
块级：允许修改尺寸
行内：不允许修改尺寸
（4）、文本，行内元素，行内块元素时采用环绕的方式排列的，是不会被浮动元素压在低下的，会巧妙的避开浮动元素。
4、清除浮动
元素浮动起来之后，除了影响自己的位置之外还会影响后续元素；
如果后续元素不想被前面浮动元素所影响的话可以使用清除浮动的效果来解决影响。
它的属性为： clear
取值为：
（1）、none
它的默认值，即不做任何清除操作。
（2）、left
清除当前元素的前面元素左浮动带来的影
响。即当前元素不会，上前占位，并且左边，不允许有浮动元素。
（3）、right
清除当前元素的前面元素右浮动带来的影
响。即当前元素不会上前占位，并且右边
不允许有浮动元素。
（4）、both
清除前面元素左右浮动带来的影响。
5、浮动元素对父元素带来的影响
由于浮动元素会脱离文档流，所以会导致元素不占据父元素的页面空间，所以会对父元素高度带来影响。如果-一个元素中所有的子元素全部都浮动了，那么该元素的高度就是0。
下面说一下解决方案：
（1）、直接设置父元素的高度
但是有弊端：必须要知道父元素的准确高度；
（2）、设置父元素也浮动
它也有弊端：对后续元素会有影响；
（3）、为父元素设置 overflow， 取值为hidden或 auto
但是它的弊端是：如果有子级内容要溢出显示的话，也同被隐藏了。
（4）、父元素中追加空子元素，并设置其clear属性为both
这一种是相对来说没有弊端的。