> 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/liang-lan-shi-float.md). # 兩欄式操作範例 ![](/files/-MKNNi1s8aFFR0J_CY8U) ### 範例一、使用clear:both {% tabs %} {% tab title="css" %} ```css .wrap { background-color: pink; width: 500px; margin-left: auto; margin-right: auto; } .clearFix { display: block; clear: both; } .navi, .main { float: left; } .navi { background-color: yellowgreen; width: 100px; } .main { background-color: gray; width: 400px; } ``` {% endtab %} {% tab title="html" %} ```markup

左邊

右邊

``` {% endtab %} {% endtabs %} ### 範例二、margin ```css @charset "utf-8"; .wrap { background-color: pink; width: 500px; margin-left: auto; margin-right: auto; } .navi { float: left; width: 100px; background-color: yellowgreen; } .main { margin-left: 100px; background-color: gray; } ``` ### 範例三、float ```css @charset "utf-8"; .wrap { background-color: pink; width: 500px; margin-left: auto; margin-right: auto; overflow: hidden; } .navi, .main { float: left; } .navi { background-color: yellowgreen; width: 100px; } .main { background-color: gray; width: 400px; } ``` ### 範例四、 after、 before ```css @charset "utf-8"; .wrap { background-color: pink; width: 500px; margin-left: auto; margin-right: auto; } .wrap::after { content: ""; display: block; clear: both; } .navi, .main { float: left; } .navi { background-color: yellowgreen; width: 100px; } .main { background-color: gray; width: 400px; } ```