浮动及高度塌陷

文档流

-网页是一个多层结构，一层叠着一层，作为用户来说，我们看到的是最上面的一层

-文档流在网页的最底层，文档流是网页的基础，它表示的是网页的位置

我们所创建元素默认都是在文档流中，在其上按照秩序排列

-元素主要有两个状态，在文档流中，不在文档流之中（脱离文档流）

元素在文档流之中的特点

块元素

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

2:块元素在文档流中默认宽度是父元素的100%

3:块元素在文档流中的高度，默认是被内容撑开的

内联元素

1:内联元素在文档流中只占自身大小,默认会从左到右排列

2:在文档流中，内联元素的宽度和高度默认都是被内容撑开的

浮动的简介及特点

简介

块元素在文档流中默认是垂直排列，

如果希望块元素横向布局，可以用float

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

可选值：

none 默认值 不浮动

left 像页面的左侧浮动

right 像页面的右侧浮动

特点

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

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

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

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

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

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

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

 块元素

              1:不会独占一行

              2:块元素的宽高被内容撑开

行内元素

           1.:可设宽高

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

清除浮动

可以用clear属性来完成

         可选值：

            none  默认值  不清除浮动

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

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

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

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

    clear原理

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

高度塌陷

在文档流中，父元素的高度是被子元素撑开 若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷

解决方案一

给父元素设置固定高度，但在实际开发过程中，高度都是被内容撑开

解决方案二

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

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

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

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

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

如何开启BFC

           1:设置元素浮动

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

           2:设置元素为inline-block

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

           3:将元素的overflow设置为一个非visible的值

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

           4:设置元素绝对定位

解决方案三

            利用 clear: both;清除浮动影响

解决方案四

添加一个内容，将内容转成块元素，清除两侧的浮动

      .box1:after {
        /* 添加一个内容 */
        content: "";
        /*将内容转成块元素  */
        display: block;
        /* 清除两侧的浮动 */
        clear: both;
      }