1、宽度自适应两列布局两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。
当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。
同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。
1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 title>宽度自适应两列布局title> 6 style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 .main-left{13 width:30%;14 height:800px;15 background:red;16 float:left;17 }18 .main-right{19 width:70%;20 height:800px;21 background:pink;22 float:right;23 }24 #footer{25 clear:both;26 height:50px;27 background:gray;28 }29 style>30 head>31 body>32 div id=herder>页头div>33 div class=main-left>左列div>34 div class=main-right>右列div>35 div id=footer>页脚div>36 body>37 html>
2、固定宽度两列布局宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。
要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。
1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 title>固定宽度两列布局title> 6 style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 #main{13 width:960px;14 margin:0 auto;15 overflow:hidden;16 }17 #main .main-left{18 width:288px;19 height:800px;20 background:red;21 float:left;22 }23 #main .main-right{24 width:672px;25 height:800px;26 background:pink;27 float:right;28 }29 #footer{30 width:960px;31 height:50px;32 background:gray;33 margin:0 auto;34 }35 style>36 head>37 body>38 div id=herder>页头div>39 div id=main>40 div class=main-left>左列div>41 div class=main-right>右列div>42 div>43 div id=footer>页脚div>44 body>45 html>
3、两列居中自适应布局同理，只需要给定父容器的宽度，然后让父容器水平居中。
1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 title>两列居中自适应布局title> 6 style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px;10 background:blue;11 }12 #main{13 width:80%;14 margin:0 auto;15 overflow:hidden;16 }17 #main .main-left{18 width:20%;19 height:800px;20 background:red;21 float:left;22 }23 #main .main-right{24 width:80%;25 height:800px;26 background:pink;27 float:right;28 }29 #footer{30 width:80%;31 height:50px;32 background:gray;33 margin:0 auto;34 }35 style>36 head>37 body>38 div id=herder>页头div>39 div id=main>40 div class=main-left>左列div>41 div class=main-right>右列div>42 div>43 div id=footer>页脚div>44 body>45 html>
4、固定宽度横向两列布局和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。
1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 title>横向两列布局title> 6 style> 7 *{margin:0;padding:0;} 8 #warp{ 9 width:960px;10 margin:0 auto;11 margin-top:10px;12 }13 #herder{14 height:50px;15 background:blue;16 }17 #nav{18 height:30px;19 background:orange;20 margin:10px 0;21 }22 #main{23 width:100%;24 margin-bottom:10px;25 overflow:hidden;26 }27 #main .main-left{28 width:640px;29 height:200px;30 background:yellow;31 float:left;32 }33 #main .main-right{34 width:300px;35 height:200px;36 background:pink;37 float:right;38 }39 #content{40 width:100%;41 overflow:hidden;42 }43 #content .content-left{44 width:640px;45 height:800px;46 background:lightgreen;47 float:left;48 }49 #content .content-right-sup{50 width:300px;51 height:500px;52 background:lightblue;53 float:right;54 }55 #content .content-right-sub{56 width:300px;57 height:240px;58 background:purple;59 margin-top:20px;60 float:right;61 }62 #footer{63 height:50px;64 background:gray;65 margin-top:10px;66 }67 style>68 head>69 body>70 div id=warp>71 div id=herder>页头div>72 div id=nav>导航div>73 div id=main>74 div class=main-left>左-上div>75 div class=main-right>右-上div>76 div>77 div id=content>78 div class=content-left>左-下div>79 div class=content-right-sup>右-上div>80 div class=content-right-sub>右-下div>81 div>82 div id=footer>页脚div>83 div>84 body>85 html>