CSS样式--浮动

浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性，无论该元素是否是块级元素还是行内元素，与display:inline-block;的作用非常一致，但是也有很多不同点。

1 浮动语法

属性：
float
功能：
将元素设置为浮动元素
值：
left 从左到右排列
right 从右到左排列
none 无浮动
（1）浮动会影响后面兄弟的元素。
（2）父级浮动，不会影响子级在父级排列的位置。

2 浮动的特性

2.1 浮动元素的排列规则：

（1）元素遇到父级边缘的时候停止
（2）其它元素在横向遇见另外一个浮动元素的时候停止
（3）当父元素宽度不够时（父级元素的宽度 < 子级盒子的总宽度）在下一排排列，同时遵循（1），（2）的规则

图一：浮动从下一排排列

图二：框1浮动高度偏大

2.2 浮动元素的宽高特性：

（1）浮动元素支持设置宽高，但是未设置宽高时元素由内容撑开。
（2）不再支持margin中设置auto的居中效果，如margin:auto;和
margin: 100px auto;（上下外边距100px仍然生效，其外边距还是可以使用的，仅仅是auto关键字居中效果不能使用。）

2.3 浮动元素的层级特性

浮动元素，比较特殊的一个点，就是有层级的概念：
（1）浮动元素之后未浮动元素会在浮动元素的下方显示
（2）文字和图片不会出现在浮动的元素的下方，而是和浮动元素并排显示。
（3）浮动元素无法撑起父级的高度
不设置父级高度，子级浮动时，就会造成高度塌陷。

3 浮动元素与行块元素

相同点：

不同点：

案例一：


二者对文本设置的不同点：
float由于自己的排列规则，文本不会居中显示。text-align:center;对元素和文字进行居中。设置浮动后，元素在父级不能居中，但是文字在元素内是居中的。
disply:Inline-block;将行内元素转为行块级元素，不影响文本的排列规则，其texe-align设置文本依旧生效。

4 文档流相关

4.1 普通文档流

界面中的元素按正常的特性（块级特性、行内特性、行块特性等）从上到下加载排列，占据正常的位置。

4.2 脱离普通文档流后

如浮动、定位等后的元素会脱离普通文档流，也不再按照常规的排列方式排列，其他元素会忽
略其存在然后进行排列，其主要特性为：
1. 提高层级，不会再占据当前的位置
2. 可以设置宽高但宽高默认由内容撑开
3. margin:auto;失效，

5 清除浮动

清除浮动是指解决如，父级高度塌陷不能占据当前位置等等的一些问题，而不是说让浮动失效。
一些情况下会默认清除浮动的：

5.1 父级高度塌陷的情况

（1）父级元素浮动
让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有弊端，一定会影响父元素之后的元素排列，甚至影响布局。

（2）父元素为行块级元素，浮动元素与下方元素之间有空隙。

（3）父级元素超出隐藏，
隐藏溢出：当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

（4）给父级元素添加高度，适用于子级元素高度已知以后不会在更改的情况下。给父级元素一定的高度，表面上是可以解决高度塌陷问题，但当子级浮动元素的高度改变后，过高会导致浮动元素超出父级边框，浮动元素高度变小会导致父级底部有空白。这样就不方便后续的结构布局改动。
（5）清除浮动，但是要添加一个div标签，而且要保证在所有要清除浮动的后面添加clear。

（6） after伪元素选择器
对（5）清除浮动进行改动，使用after（在…之后）伪元素选择器，对伪元素选择器添加样式。

5.2 clear 清除浮动

属性：
clear
功能：
清除元素兄弟元素的某一种浮动
值：
left：清除前面兄弟元素的左浮动
right-清除前面兄弟元素的右浮动
both-清除前面兄弟元素元素的所有浮动
注意点：
A、清除浮动的属性（clear）是作用于其前边的兄弟元素而不是其自己或者其子级
B、清除浮动的属性元素的本身必须为块级特性

5.3 after伪元素选择器+清除浮动

after伪元素选择器完美切合clear，所以通常我们都是用after伪元素来清浮动：

在浏览器中，选中父级after会出现在所有子集最后，选中::after可以找出after选择器添加的样式。after与clear完美切合，after写在父级元素的类名中，相当于添加一个子级元素，且是在子级元素的最后一个子级元素，这样就可以为此添加清除浮动样式。

对after的理解：对某一元素使用after伪类选择器，添加样式后，就相当于对该元素添加了一个没有标签的儿子元素。



对元素使用after伪类选择器，添加样式后，就相当于对该元素的最后添加了一个没有标签的儿子元素。