html 浮动

块元素：

         1、可设置宽高

         2、默认占用整行

         行内元素：

         1、设置宽高不起作用

         2、元素大小和内容大小相同

         3、宽高度由内容撑开

         4、水平放置，如果放置不下自动换行

         display:

         - 设置元素的框类型

         可选值：

         inline：将元素设置为内联元素；

         -行内元素的默认状态

         

         如果将inline使用在块元素中，则宽高消失，独占一行也消失，大小由内容撑开

         block：可以将元素设置为块状元素

         -块级元素的默认值

         -如果将block使用在行内元素中，则可以设置宽高

         -如果不设置宽高，默认独占一行

         inline-block：可将元素设置为行内块

          - 水平放置，而且可以设置宽高

          - 行内元素设置为inline-block，则可以设置宽高

          - 块元素设置 inline-block，则水平放置

          - 水平放置元素后默认存在间距，解决方法

          1、设置元素margain 为负值

          2、设置html字体大小为0，但后续元素需要设置字体大小

        display：none

        -隐藏元素，并位置不保留

        visibility: hidden

        -隐藏元素，位置保留

知识点:

           - 浮动

           描述：

           - 元素默认在页面中的最底层，称为文档流

           - 文档流特点：

             1、块元素

                默认占整行，垂直排列

                可设置宽高

             2、行内元素

                元素大小和内容大小相同

                水平放置，放置不下自动换行

           - 如果想让元素水平排列，则可以让元素脱离文档流

           - 使用float属性设置为非none，则元素脱离文档流  

           

            float属性：

               可选值：left：元素左浮动

                      right：元素右浮动

                      none：不浮动（默认值，元素在文档流中）

            -浮动特性

             1、设置元素的float属性值为非none，则元素脱离文档流

             2、当元素脱离文档流紧跟着的下面的兄弟元素会自动上移。（影响布局）

             3、元素浮动后，会向左上或右上移动，直到遇到父元素或浮动的兄弟元素的边框，停靠在该位置

             4、如果浮动元素上面右未浮动的块元素，则浮动元素不会超出块元素

             5、块状元素浮动后，默认宽度消失（不设置宽度时），默认占整行消失，宽度为设置的值

             6、行内元素浮动后，可设置宽高

             7、浮动元素如果一行放置不下，会自动换行

             8、浮动元素不会超过它上面的兄弟元素，最多并排

             9、浮动元素不会覆盖文本和图片，文本会环绕显示  

        

清除浮动

        描述：

        -  - 清除浮动元素对当前元素的影响,本身能够继续设置浮动

              - 属性：

                clear：

                可选值： left：左浮动对当前元素影响

                        right：左浮动对当前元素影响

                        both: 清除两侧浮动对当前元素的影响,以影响最大的为主      

       

        both:清楚两侧浮动的影响，以影响大的为准

 描述：

          - 在文档流中，如果没有设置高度，则父元素的宽度为auto,高度由子元素撑开

          - 当子元素设置浮动，则子元素会脱离文档流，此时子元素则无法撑开父元素，导致父元素高度塌陷

          - 如果父元素塌陷,则父元素下的兄弟元素会上移，导致布局混乱

          解决方法：

          - 空div+清除浮动防止塌陷

          - 父元素设置高度防止塌陷

          - 父级添加overflow属性

          overflow：hidden

          - 使用自定义伪类

/*

          同时解决塌陷和传递问题

          */

          .clearfix::after,.clearfix::before{

            content: "";

            display: table;

            clear: both;}

知识点：

              - overflow

         描述：

             - 当子元素的大小超过父元素，则可通过overflow属性设置显示方式

             overflow：visiable：超出部分显示（默认值）

                       hidden：超出部分隐藏

                       auto：隐藏部分出现水平或垂直滚动条

                       scoll：呈现水平和垂直滚动条

inline block 和float 区别

相同点：

        都可以让元素水平放置，解决页面布局问题

        不同点：

        inline-block:

         -位置方向不可控制，会出现默认空格

         -IE 6、IE 7上不支持