<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二列布局_左右固定_自己撑开父级块</title> <style type="text/css"> .container{ 960px; margin: 0 auto; background-color: yellow; overflow: hidden; } .clear{ -ms-zoom: 1; } .clear:after{ content:''; display: block; clear: both; } .left{ 200px; height: 600px; background-color: #4169E1; float: left; } .right{ 750px; height: 600px; background-color: darkcyan; float: right; } </style> </head> <body> <h2>基本思路</h2> <ol> <li>要给左右2列添加一个父集区块</li> <li>要给左右2个区块设置一个浮动:left/right</li> <li>给父区块添加一个after伪类让子块撑开父集</li> </ol> <!-- DOM --> <div class="container clear"> <div class="left">左侧</div> <div class="right">右侧</div> </div> </body> </html>