CSS浮动

1.浮动

2.文档流

3.行内元素和块元素的区别

4.display

block：块元素（由于div默认是块元素，所以下图就和div一样）


inline:行内元素
将div样式修改为行内元素，发现他们的样式变成和span一样，因为span就是默认的行内元素

inline-block：内联-块元素（行内块元素）
即拥有行内元素的不会换行，无法自动居中的特点，有同时有块元素的可以设置高宽这样的特征
一般用于
1、（块元素->行内块元素）列表li标签，使标签会自动换行（原来li标签为块元素，块元素会自动换行，所以是纵向排列）从而实现li标签的横向排列。
2、（行内块元素->块元素）或者在某些情况下，是某个span标签占住一定空间，我们将span标签的display属性修改为行内块元素，让他可以占有一定空间。

none：不显示标签，并且，这个标签不同于“六娃”，“六娃”只是隐身，他还是存在的，但是none它会彻底不占标准空间

5.浮动

通过float:left | right | none;
可以进行浮动的设置，当一个元素被浮动后，那么他会在原本自身的文档流位置变为“离开”文档流位置，并且根据你的浮动方向进行左 | 右浮动（或者none不浮动），然后在他之后的元素会替代他原本文档流的位置，并且如果之后元素比该元素小，则会被该元素覆盖）简单说浮动是浮动在文档流之上的一个操作）。

注意：浮动不会遮挡文字，因为浮动的初衷就是用于让文字环绕，只是后期开发发现不仅仅能用于文字环绕，也可以用于页面布局，所以页面布局才会使用浮动。

6.清除浮动影响

解决方法1：
给父类div增加一个高度


第二个方法
在原本的父类中增加一个div，并且设置上高，就可以支撑浮动塌陷


第三个方法
在父类节点上增加一个CSS样式声明： overflow:hidden;


第四种方法
使用声明：clear:left(左）| right(右）| both(两侧）；次声明效果为清除浮动。
当出现浮动，文档流发生变化，我们需要让某一个元素出现在原来该出现的位置，而不是浮动影响的文档流位置，此时，在该元素上增加上clear声明。
需要清除哪个被影响的元素，就在哪个元素上增加clear。
这里的影响指的是：文档流位置的影响。

第五种方法
伪类after，在父级元素上增加伪类

相当于在id为father的div之后增加了一个块元素，块元素的内容为" "，并且这个块元素清除了浮动的影响，所以可以看到后面的元素也被清除了影响。