在页面布局的时候，可以用绝对定位来实现，但是由于调整某个区块框时其他区块的位置不会相应的改变，所以这并不是布局的首选方式。但是使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动狂的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现的像就浮动框不存在一样。
这篇文章就总结几种简单的区块框浮动的例子：
立即学习“前端免费学习笔记（深入）”；
1.不浮动区块框排序
立即学习“前端免费学习笔记（深入）”；
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ width:200px; height:200px; font-size:40px; text-align:center; } #one{ background:red; } #two{ background:green; } #three{ background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html>立即学习“前端免费学习笔记（深入）”；
重新定义#one选择器，只需要添加一行代码：
立即学习“前端免费学习笔记（深入）”；
#one{ float:right; background:red; }立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
3.设置第一个向左浮动
为了能让大家看出效果，必须要调整三个区块的大小，所以直接重新写代码了。
立即学习“前端免费学习笔记（深入）”；
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ height:200px; font-size:40px; text-align:center; } #one{ width:200px; float:left; background:red; } #two{ width:240px; background:green; } #three{ width:200px; background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html>立即学习“前端免费学习笔记（深入）”；
不难看出，框（2）被框（1）给覆盖了。只有多出来的40px的宽度能看见。因为框（1）浮动之后，就不属于文档流范围，相当于它原先的位置空了出来，所以框（2）自然就补了上去。
立即学习“前端免费学习笔记（深入）”；
4.设置三个框都向左浮动
这个只需要在例1中的div{ }中加一句代码：
立即学习“前端免费学习笔记（深入）”；
float:left;
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
5.设置三个框向左（空间不足）
只需要相应的修改三个区块的大小即可
立即学习“前端免费学习笔记（深入）”；
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ float:left; height:200px; font-size:40px; text-align:center; } #one{ width:500px; background-color:red; } #two{ width:400px; background:green; } #three{ width:600px; background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html>立即学习“前端免费学习笔记（深入）”；
空间不足的话，区块就自动下移了
立即学习“前端免费学习笔记（深入）”；
6.第三个区块被第一个“卡住”
区块3在上面没有足够的空间，下移的时候，区块1多出的部分会自动阻挡区块3的移动。
最后再介绍一个属性：clear（清除属性，指定一个元素是否允许有元素漂浮在它的旁边）
立即学习“前端免费学习笔记（深入）”；
clear:none;clear:left;clear:right;clear:both;
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
192
