CSS 浮动(Float) 清除浮动

说浮动以前，先说一些别的东西

标准文档流

宏观地讲，咱们的web页面和photoshop等设计软件有本质的区别：web页面的制做，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画
标准文档流的特性
1.空白折叠现象(不管多少个空格、换行、tab，都会折叠为一个空格)
2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写

行内元素和块级元素

行内元素和块级元素的区别：(很是重要)
行内元素

• 与其余行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度

块级元素

• 霸占一行，不能与其余任何元素并列
• 能接受宽、高。若是不设置宽度，那么宽度将默认变为父亲的100%

块级元素和行内元素的相互转换
咱们能够经过display属性将块级元素和行内元素进行相互转换

• display:inline;能够把块级元素转换为行内元素
• display:block;能够把行内元素转换为块级元素

再说一个：display:inline-block;能够把行内元素或块级元素设置为 行内块元素 ，能够并排显示，而且能够设置块级元素的属性

标准流里面的限制很是多，致使不少页面效果没法实现。若是咱们如今就要并排、而且就要设置宽高，那该怎么办呢？办法是：脱离 标准文档流！

css中一共有三种手段，使一个元素脱离标准文档流：

• 浮动
• 绝对定位
• 固定定位

浮动(float)

float:left | right | none ;(默认不浮动none)

浮动的元素脱标

• 在一个父元素内部，若是一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排
• 浮动并无彻底地脱离了标准文档流（可是它具备破坏性，因此能够用Flex布局，想了解Flex布局，请参考个人 Flex布局教程），若是后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围效果

上图中，在默认状况下，两个div标签是上下进行排列的。如今因为float属性让上图中的第一个div标签出现了浮动，因而这个标签在另一个层面上进行排列。而第二个div还在本身的层面上听从标准流进行排列。

一旦一个元素浮动了，那么，将可以并排了，而且可以设置宽高了。不管它原来是个行内元素，仍是块级元素

浮动的元素互相贴靠

若是给三个div均设置了float: left;属性以后，而后设置宽高。当改变浏览器窗口大小时，能够看到div的贴靠效果，以下图

上图显示，3号若是有足够空间，那么就会靠着2号。若是没有足够的空间，那么会靠着1号。若是没有足够的空间靠着1号，3号本身去贴左墙，不过3号贴左墙的时候，并不会往1号里面挤，而是往1号下面排列，若是小到极限时，里面的浮动的子元素宽度是不会改变的

一样，float还有一个属性值是right，这个和属性值left是对称的。

浮动的元素有“字围”效果

来一张图，以下：

上图中，咱们发现：div挡住了p，但不会挡住p中的文字，造成“字围”效果。

收缩

收缩：一个浮动的元素，若是没有设置width，那么将自动收缩为内容的宽度（这点很是像行内元素） 如图：

上图中，div自己是块级元素，若是不设置widh，它会单独霸占整行；可是，设置div浮动后，它会收缩

若是一个元素没有设置高度，它的高度是靠里面的内容撑起来的。若是父元素内部元素都浮动了，那么会形成父元素的高度塌陷

同步

若是多个元素浮动了，那么这们就会并排显示，若是都是同一个方向的浮动，它们会牢牢地贴在一块儿(本身动手写一下)

若是一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，若是是左浮动，就向左移动，直到移动到父元素的左边界，若是是向右浮动，就向右移动，直接移动到父元素的右边界

补充：

上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可若是设置para1+para2的宽度大于div的宽度，咱们会发现，para2掉下来了：

补充

• 浮动只对父元素和之后的元素有影响，对以前的元素没有影响

浮动的清除(重点)

元素浮动会形成的影响：

对父元素的影响(父元素的高度坍塌)
解决办法：

• 加高法 给父元素设置高度，就不会塌陷(简单，基本不用，大部分状况下父元素的高度是须要子元素撑起来的)
• overflow:hidden 简单，使用overflow:hidden父元素的高度会随着子元素的高度变化而变化。overflow:hidden本职工做是用来处理溢出 在使用过程当中，须要注意子元素若是想要超出父元素高度，此时overflow:hidden就不适合了
• 隔墙法(clear:both) 在全部子元素后面加一个空的div 在这个div上面加clear:both，就能够清除浮动（分为内墙法和外墙法，本质上同样），clear:both是专业清除浮动的

对后面兄弟元素形成的影响(兄弟元素会向上移动)
解决办法：

• 在受影响的元素上面的加 clear:both（参考对父元素的影响）

项目中最经常使用的清除浮动的办法 利用伪元素 after
其实很简单,就是写一个清除浮动的类,哪一个元素想要清除浮动,只需加上 class="clearfix" 就能够,很是简单
清除浮动类的代码:

.clearfix:after{
	content="";
	display:block;
	clear:both;
	height:0;
}
复制代码

因为浮动具备破坏性,因此后面就有一个新的Flex布局方案,用起来别提多爽了,绝对让你爽到爆,还简单容易上手,想了解 Flex布局 ,请参考个人文章：Flex 布局教程

---

^_<