认识浮动及相关知识点的理解

01.浮动简介

块元素在文档流 会独占一行，自上而下排列

   如果设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点

      float: ; 设置元素的浮动

        可选值：

          none  默认值，元素正常显示，不浮动

          left  元素向左浮动

          right  元素向右浮动

      float可以使块元素水平布局

      设置float浮动特点（第一类特点）

        1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在

          下面的元素就会上移，挤上去

        2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，

        而且默认情况下，不会脱离父元素的范围

        3、设置浮动的元素，不会超过它前一个兄弟，最多一遍齐

        4、如果浮动元素的前一个兄弟，没有浮动，则浮动的元素不会超过他前面没有浮动的元素

        总结：浮动主要是用于元素的水平布局

02.浮动的特点1

浮动的第二类特点

      当浮动元素遇到了文字，浮动的元素不会覆盖文字，而是文字会环绕在浮动元素的周围

      从而实现文字环绕图片的效果

      这也是浮动最早的功能，只是后面用于水平布局

03.浮动的特点3

浮动的第三类特点

      元素在文档流当中

      块元素  ： 独占一行

      行内元素 ： 不会独占一行，不能自定义设置宽高

      行内块元素 ：兼具块元素，行内元素的特点

      元素脱离文档流了，就不再区分块，行内，行内块，也就不具有以上的特点

        元素也不会独占一行了，也可以设置宽高了等等

04.高度塌陷

一般情况下，父元素的高度是不设置的，让它被内容撑开

      高度塌陷：

        父元素的高度一般是被子元素或者叫内容撑开的，若设置子元素浮动，则子元素就会脱离文档流

        也就撑不开父元素的高度了，从而导致父元素的高度丢失，页面布局混乱

      解决高度塌陷的方案一：

        设置父元素的高度

          这种方式不推荐使用