css三大布局模型

CSS是一种用于网页布局和设计的语言。其中，布局是网页设计中非常重要的一部分。在CSS中，布局模型是指通过设置各个元素的属性来实现网页布局的一种方式。在CSS中，有三种常用的布局模型：文档流模型、浮动模型和弹性模型。

 /* 文档流模型 */
    div {
        display: block;
    } 

文档流模型是CSS中最基本的布局模型。在这种模型中，元素在文档流中依次排列，每个元素占据一行。元素的布局按照HTML代码的顺序进行。它可以通过设置CSS中的display属性来控制元素在页面中的布局方式。默认情况下，大多数的HTML元素都是在文档流中进行布局的。

 /* 浮动模型 */
    div {
        float: left;
    } 

浮动模型是CSS中常用的另一种布局模型。在这种模型中，元素脱离文档流，相邻的元素可以左右浮动。通过设置CSS中的float属性，可以控制元素在页面中的浮动方式。在使用浮动模型时，应该注意清除浮动以防止页面布局出现意外情况。

 /* 弹性模型 */
    div {
        display: flex;
    } 

弹性模型是CSS中较为新的一种布局模型。在这种模型中，元素可以根据需要自动调整大小，并且可以沿着水平或垂直方向进行排列。通过设置CSS中的display:flex属性，可以将一个元素的子元素变为弹性元素。弹性模型在响应式布局中使用广泛。