> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong/css-pai-ban/san-lan-shi.md). # 三欄式 - 範例 ## 範例一、Float {% tabs %} {% tab title="HTML" %} ```markup

內容

``` {% endtab %} {% tab title="CSS" %} ```css *::before, *::after, * { -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper { width: 1030px; margin-left: auto; margin-right: auto; background-color: pink; } .header { background-color: aquamarine; } .navi, .main, .sidebar { float: left; } .navi { width: 20%; background-color: blanchedalmond; } .main { width: 60%; background-color: coral; } .sidebar { width: 20%; background-color: darkgray; } .footer { clear: both; background-color: darkkhaki; } /*# sourceMappingURL=all.css.map */ ``` {% endtab %} {% endtabs %} ## 範例二、width ```css @charset "utf-8"; *, *::before, *::after { box-sizing: border-box; } .wrapper { width: 1030px; margin-left: auto; margin-right: auto; background-color: pink; } .header { background-color: aquamarine; } .navi, .main, .sidebar { float: left; } .navi { width: 20%; background-color: blanchedalmond; } .main { width: 60%; background-color: coral; } .sidebar { width: 20%; background-color: darkgray; } .footer { background-color: darkkhaki; clear: both; } .container { overflow: hidden; } ``` ## 範例三、clear ```css @charset "utf-8"; *, *::before, *::after { box-sizing: border-box; } .wrapper { width: 1030px; margin-left: auto; margin-right: auto; background-color: pink; } .header { background-color: aquamarine; } .navi, .main, .sidebar { float: left; } .navi { width: 20%; background-color: blanchedalmond; } .main { width: 60%; background-color: coral; } .sidebar { width: 20%; background-color: darkgray; } .footer { background-color: darkkhaki; } .clearFix{ display: block; clear: both; } ``` ## 範例四、after ```css @charset "utf-8"; *, *::before, *::after { box-sizing: border-box; } .wrapper { width: 1030px; margin-left: auto; margin-right: auto; background-color: pink; } .header { background-color: aquamarine; } .navi, .main, .sidebar { float: left; } .navi { width: 20%; background-color: blanchedalmond; } .main { width: 60%; background-color: coral; } .sidebar { width: 20%; background-color: darkgray; } .footer { background-color: darkkhaki; } .clearfix::after{ content: ""; display: block; clear: both; } ```