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>
登录后复制