css三种基本布局方式

在前端开发中，布局是非常重要的一部分。CSS提供了三种基本布局方式：流布局（默认）、浮动布局和定位布局。接下来，我们将分别介绍这三种布局方式。

1. 流布局

流布局也称为“文档流布局”，是默认的CSS布局方式。在流布局中，元素按照它们在HTML文档中出现的顺序依次排列。每个元素占据一定的空间，如果元素宽度大于父元素的宽度，则会自动换行。

box {
    width: 50%;
    height: 100px;
} 

2. 浮动布局

浮动布局是指元素在水平方向上浮动，脱离文档流，并根据容器的大小自适应排列。浮动元素可以左浮动、右浮动或者双浮动，浮动元素后面的元素会向上移动，填充浮动元素所占据的空间。

.box1 {
    float: left;
    width: 50%;
    height: 100px;
}
.box2 {
    float: right;
    width: 50%;
    height: 100px;
} 

3. 定位布局

定位布局是指元素根据自身属性值来进行定位，绝对定位元素不再占据文档流位置。在定位布局中，元素通过设置position属性值为absolute或fixed实现绝对定位。绝对定位元素会脱离文档流。

.box {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100px;
} 

以上就是CSS三种基本布局方式的介绍。掌握这三种布局方式，可以使我们更好地进行前端布局设计。