基于float的几种布局
在这里介绍基于float的几种布局.
1.浮动与两侧自适应的布局
如图所示，左边没有限定宽度，右边宽度自适应。使用table-cell实现的布局，可以适用于两栏的布局。
HTML代码
与浮动与两侧自适应的布局改变DOM树先后顺序的方法
HTML代码
浮动与右侧尺寸固定的流体布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局对应的CSS代码
*{padding:0;margin:0;}
.container{max-width:960px;margin:0 auto;overflow:hidden;}
.left{
margin-right:200px;
background:red;
}
.right{
width:200px;
height:100px;
float: right;
background:green;
}
关键点在于，HTML代码中，把在右边显示的DIV放到左边显示的前面，然后通过float: right浮动到右边，可通过调整left盒子的margin-right来调整两个盒子之间的间距。
这种方式会破坏页面优先渲染顺序，它会先渲染右边的盒子，再渲染左边的盒子，视页面区域内容重要程度而定。
不改变DOM树先后顺序的方法
HTML代码
浮动与右侧尺寸固定的流体布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局对应的CSS代码
*{padding:0;margin:0;} .container{max-width:960px;margin:0 auto;overflow:hidden;} .left{ width:100%; float:left; background:red; } .right{ width:200px; height:100px; float: left; margin-left:-200px;/*这个数值的大小是跟其宽度值相同的*/ background:green; } 关于negative margin（负边距），w3c提到:
Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.
给定一个足够大的负边距，可以使受影响的相邻元素发生重合。
3.单侧固定的布局
单侧固定的布局分为固定布局和流体布局。
通用的HTML
浮动与右侧尺寸固定的流体布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局与右侧尺寸固定的浮动布局固定布局
对应的CSS代码
*{padding:0;margin:0;}.container{max-width:960px;margin:0 auto;overflow:hidden;}.left{ width:100px; height:100px; float:left; background:red;}.right{ width:100px; height:100px; float: right; background:green;} 通过float:left; float:right;实现。
流体布局
对应的CSS代码
*{padding:0;margin:0;} .container{max-width:960px;margin:0 auto;overflow:hidden;} .left{ width:100px; height:100px; float:left; margin-right:20px; background:red; } .right{ background:green; }关键字：css, float, 浮动, 布局
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！