浮动及高度塌陷

• 浮动

     块元素在文档流中默认是垂直排列， 如果希望块元素横向布局，可以用float

float 可以使元素浮动，向父元素的左侧或右侧浮动，脱离文档流

可选值：

           none 默认值 不浮动

           left 像页面的左侧浮动

          right 像页面的右侧浮动

浮动的特点

         1:浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动

         2:元素浮动之后，元素会尽量的向页面的左上或右上浮动

         3:浮动元素默认会在父元素区域内活动，不会从父元素中移出

         4:浮动元素上面是一个没有浮动块元素，则浮动元素无法上移

         5:浮动元素不会超过它上边的兄弟，最多一边齐

         6:浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围， 所以可以利用浮动来设                置文字环绕图片的效果

         7:当元素设置浮动以后，会脱离文档流，块，行内元素的特点也会发生改变

           块元素

              1:不会独占一行

              2:不设置宽高后，块元素的宽高被内容撑开

           行内元素

              1:可设宽高

         总结：脱离文档流之后，不会再区分块和行内元素

• 高度塌陷

        在文档流中，父元素的高度是被子元素撑开

               若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷

               会影响页面布局，这个必须解决

        解决方案一：

              给父元素设置固定高度

              但在实际开发过程中，高度都是被内容撑开

       解决方案二：

              页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC

              当开启了BFC后，元素会变成一个独立的布局区域，会有以下特点

                  1:父元素的垂直外边距不会和子元素重叠

                  2:开启BFC的元素不会被浮动元素所覆盖

                  3:开启BFC的元素可以包含浮动的子元素（可以解决高度塌陷）

          如何开启BFC

              1:设置元素浮动

                  -不推荐，还是会改变页面的布局，而且父元素的宽度会丢失

              2:设置元素为inline-block

                 -不推荐，会丢失父元素的宽度

             3:将元素的overflow设置为一个非visible的值，常用的为hidden

                 -可以使用，也会产生一些小的副作用

             4:设置元素绝对定位

      解决方案三：

               利用 clear: both;清除浮动影响（设置一个空盒子box）

      由于受到浮动的影响，box上移，希望清除其他元素浮动对当前元素产生的影响，

      可以用clear属性来完成

         可选值：

            none  默认值  不清除浮动

            left  清除左侧浮动元素对当前元素的影响

            right   清除右侧浮动元素对当前元素的影响

            both  清除两侧浮动元素对当前元素的影响

                   清除对他影响最大的那个元素的浮动 

      clear原理

           设置浮动后，浏览器会自动为元素添加一个上外边距，以使位置不受其他元素的影响  

       解决方案四：

      /*解决高度塌陷方案四  固定写法*/
      .box1:after {
        /* 添加一个内容 */
        content: "";
        /*将内容转成块元素  */
        display: block;
        /* 清除两侧的浮动 */
        clear: both;
      }