文档流（normal flow）

网页是一个多层的结构，一层摞着一层

通过CSS可以为每一层设置样式

用户只能看到最上面一层

最底下的一层称为文档流，文档流是网页的基础

我们所创建的元素默认都是在文档流中进行排列的

元素的主要有两个状态：

1、在文档流中

2、不在文档流中（脱离文档流）

元素在文档流中的特点：

块元素：在文档流中独占一行

默认宽度是父元素的全部（会把父元素撑满）

默认高度是被内容撑开（子元素）

行内元素：不会独占页面一行，只占自身大小

行内元素正在页面中自左向右水平排列，如果一行中不能容纳下所有的行内元素，则会换到第二行自左向右排列（按照书写习惯）

float特性

加浮动元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列

float的取值：left、right、none（默认值）

设置float的元素会脱离文档流，

注意：

浮动元素只会影响其后面的元素，不会影响其前面的元素

 

 #div1{
           background-color:greenyellow;
           width:200px;
           height:200px;
           
       }
       #div2{
           background-color:red;
           width:300px;
           height:300px;
           float:right;
          
           
       }
       #div3{
           background-color:grey;
           width:400px;
           height:400px;
       }
       body{
           border:solid black;
       }

 #div1{
           background-color:greenyellow;
           width:200px;
           height:200px;
           
       }
       #div2{
           background-color:red;
           width:300px;
           height:300px;
           float:left;
          
           
       }
       #div3{
           background-color:grey;
           width:400px;
           height:400px;
       }
       body{
           border:solid black;
       }

 

 可通过此方法实现图文环绕

默认宽根据内容来决定

 以下图片是设置了浮动特性的运行结果

 当一行不能放下所有的浮动元素的时候，浮动元素会自动换行

浮动主要用于块元素

清除float浮动

上下排列：clear属性，表示清楚浮动的，（left、right、both）

要使被浮动元素影响的元素不受影响，就应该对受影响元素设置clear属性，且属性值需要与float属性值一致

 #div2{
           background-color:red;
           width:300px;
           height:300px;
           float:left;
          
           
       }
       #div3{
           background-color:grey;
           width:400px;
           height:400px;
           clear:left;
       }

高度塌陷问题

当子元素脱离文档流的时候父元素会出现高度塌陷问题

BFC（Block formatting context）会计格式化环境，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域

元素开启BFC的元素

不会被浮动元素所覆盖

子元素和父元素的外边距不会重叠

可以包含浮动的子元素

可以通过特殊的方式开启BFC

1、设置浮动（不推荐）

2、将元素设置为行内块元素（不推荐）

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