web css布局是網頁設計中基礎的一環，它主要用于控制網頁元素在頁面中的排列、大小、位置等。下面我們來介紹一些常用的css布局方法。

/*1.標準文檔流布局*/
p{
width:100px;
height:100px;
background-color:#f00;
float:left;
}
/*2.浮動布局*/
.box{
float:left;
width:200px;
}
.box1{
height:100px;
background-color:#f00;
}
.box2{
height:200px;
background-color:#0f0;
}
/*3.定位布局*/
.box{
position:relative;
}
.box1{
position:absolute;
top:50px;
left:50px;
width:100px;
height:100px;
background-color:#f00;
}
.box2{
position:absolute;
top:150px;
left:150px;
width:100px;
height:100px;
background-color:#0f0;
}

標準文檔流布局是最常見的一種布局方式，它是按照文檔流自動排列元素位置的，不需要特殊的設置就可以實現。但是在一些需要特殊布局的場合，比如兩欄布局、三欄布局等，就需要使用到浮動布局。浮動布局可以讓元素在頁面中浮動排列，但是需要特別注意清除浮動，否則會產生不可預知的布局效果。

定位布局則是通過設置元素的位置屬性和偏移量來實現布局的，適用于一些需要精確控制位置的場合。但是由于定位元素會脫離文檔流，所以在使用時需要特別注意其對其他元素的影響。