網(wǎng)頁布局一直都是前端工程師需要著重考慮的問題之一，而實(shí)現(xiàn)兩列布局則是最常見的布局之一。CSS提供了多種方式實(shí)現(xiàn)這種布局，以下為兩種常見的方法：

/*方法一：使用浮動(dòng)*/
/*HTML結(jié)構(gòu)*/
<div class="wrapper">
<div class="left">
<p>左側(cè)內(nèi)容</p>
</div>
<div class="right">
<p>右側(cè)內(nèi)容</p>
</div>
</div>
/*CSS樣式*/
.wrapper{
overflow: hidden;
}
.left{
float: left;
width: 70%;
}
.right{
float: left;
width: 30%;
}

使用浮動(dòng)的方法實(shí)現(xiàn)兩列布局是最常用的方法之一。將左側(cè)內(nèi)容和右側(cè)內(nèi)容都設(shè)置為浮動(dòng)，再將父級(jí)元素設(shè)置為“overflow: hidden”可以保證父級(jí)元素高度不會(huì)塌陷。

/*方法二：使用flexbox*/
/*HTML結(jié)構(gòu)*/
<div class="wrapper">
<div class="left">
<p>左側(cè)內(nèi)容</p>
</div>
<div class="right">
<p>右側(cè)內(nèi)容</p>
</div>
</div>
/*CSS樣式*/
.wrapper{
display: flex;
}
.left{
flex: 7;
}
.right{
flex: 3;
}

使用flexbox的方法實(shí)現(xiàn)兩列布局的代碼更簡(jiǎn)潔、清晰，但需要注意的是僅適用于現(xiàn)代瀏覽器。在父級(jí)元素中，設(shè)置“display: flex”即可將子元素按照一定比例放置在水平方向上。

以上是兩種常見的實(shí)現(xiàn)兩列布局的方法，效果各有不同，可根據(jù)需求進(jìn)行選擇。