HTML布局中浮动布局非常常见,很多网站普遍都会使用到浮动布局,博客网站使用最多。做过很多网站,却没有总结过,今天就来分享下自己在浮动布局的总结(本文以微博为例)
微博排版
先上图片:
盒子中包含左右两个子盒子(用黑边框将其分开),就以这种左右两栏为布局的模型,来总结浮动布局的方法。
浮动布局HTML排版
<div class="container">
<div class="wrap clearfix">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
方法一:固定布局
<style>
.container{width: 600px; background-color: #DDF3F7;}
.wrap{padding: 20px;overflow: hidden;}
.box1{float: left;width: 56px;background-color: #ccc;height: 300px;}
/* 固定布局写法 */
.box2{float: right;width: 484px;background-color: #ccc;height: 300px;}
/*清除浮动造成的影响*/
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}
</style>
方法二:流体布局
<style>
.container{width: 600px; background-color: #DDF3F7;}
.wrap{padding: 20px;overflow: hidden;}
.box1{float: left;width: 56px;background-color: #ccc;height: 300px;}
/* 流体布局写法 */
.box2{margin-left: 76px;background-color: #ccc;height: 300px;}
/*清除浮动造成的影响*/
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}
</style>
方法三:浮动与两侧皆自适应的流体布局
<style>
.container{width: 600px; background-color: #DDF3F7;}
.wrap{padding: 20px;overflow: hidden;}
/* 浮动与两侧皆自适应的流体布局写法*/
.box1{float: left;margin-right:20px;background-color: #ccc;height: 300px;}
.box2{display: table-cell; *display: inline-block; width: auto;}
/*清除浮动造成的影响*/
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}
</style>
注意采用这种方法,HTML文档中box1和box2中必须有内容
方法四:右浮动,改变DOM位置的流体布局
<style>
.container{width: 600px; background-color: #DDF3F7;}
.wrap{padding: 20px;overflow: hidden;}
/* 浮动与两侧皆自适应的流体布局写法*/
.box1{width: 56px; float: right;background-color: #ccc;height: 300px;}
.box2{margin-right: 76px;background-color: #ccc;height: 300px;}
/*清除浮动造成的影响*/
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}
</style>
方法五:左浮动,不改变DOM位置的流体布局写法
<style>
.container{width: 600px; background-color: #DDF3F7;}
.wrap{padding: 20px;overflow: hidden;}
/* 浮动与两侧皆自适应的流体布局写法*/
.box1{width: 100%; float: left;background-color: #ccc;height: 300px;}
.box2{width: 56px; float: left; margin-left: -56px;background-color: #000;height: 300px;}
/*清除浮动造成的影响*/
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}
</style>
总结
这几种方法以“浮动与两侧皆自适应的流体布局”为最佳,因为它自适应强,可以不需要设置左右盒子的宽度,根据盒子内容来确定它们的排版。微博中采用这种方式可以实现盒子中个人头像大小替换,替换的同时并不会破坏网页的排版。