CSS-浮动

行内元素 和 块级元素

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

• 块级元素：
  · 霸占一行，不能与其他任何元素并列；
  · 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

• 相互转换

display: inline; //块级 转 行内；此时这个容器不能设置宽度、高度
display: block; //行内 转 块级

浮动

• 脱离标准文档流：浮动、绝对定位、固定定位

标准文档流会优先渲染！！！
一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。

**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。

标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

清除浮动

1.给祖先元素加高度
2.clear:both; //clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：不允许左侧和右侧有浮动对象。但是，它所在的标签，margin属性失效了。
3.隔离法：就是加一个盒子
4.overflow:hidden; 本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上 overflow:hidden ; 那么，父亲就能被儿子撑出高了。这是一个偏方。