网页布局基础 第三次（浮动布局）
清楚浮动
清除浮动的方法：
对受到影响的元素设置如下属性
1、为元素设置clear属性——clear:both;、clear:left;或者clear:right;
2、同时设置width:100%(或固定宽度【固定宽度可能有问题】)+overflow:hidden;
2的width设置为100%就是继承父容器的宽度。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹浮动的部分去除。
横向两列布局的实现：这是网页布局最常见的方式之一
主要应用技能：
float属性——使纵向排列的块级元素，横向排列
margin属性——设置两列之间的间距
clear：both，主要用于对紧邻其后元素的清除浮动；
width：100%;overflow：hidden，主要用于浮动对父包含块的影响
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } #wrap { background:#00C; margin:0 auto; width:960px; } #header { background:#FF3300; width:100%; } #mainbody { background:#FC0; width:100%; overflow:hidden; } .left { width:800px; height:200px; background:#000; float:left; } .right { width:140px; height:500px; background:#690; float:right;; } #footer { background:#639; width:100%; } </style> </head> <body> <div id="wrap"> <div id="header">头部</div> <div id="mainbody"> <div class="left">左边</div> <div class="right">右边</div> </div> <div id="footer">版权部分</div> </div> </body> </html>
