学习并记录基于float属性的常用DIV+CSS布局

之前页面布局主要学的是基于layui的栅格布局及后台布局,基于html本身的布局了解不多,目前网上介绍较多的是基于display + position + float的布局、flex布局等(参考文献2更为详细地介绍了各类网页布局,有兴趣的可以了解),本文主要学习并记录参考文献1中基于display + position + float的网页布局,由于主要用到float属性,因此文章题目就写成了基于float属性的常用DIV+CSS布局。
  主要涉及的CSS知识点如下:
  1)float属性:指定页面元素(盒子)是否在父元素中浮动,默认值为none,可取值为none、left、right、inherit,取值为inherit时从父元素继承 float 属性值,取值为left时元素向左浮动直至碰到另一浮动元素或父元素的边框,取值为right时类似left,只是变成了向右浮动。float属性只能控制水平方向浮动,无法控制竖直方向浮动;
  2)margin属性:设置元素的边界(外边距),值可以为数值或百分比,也可以为Autofac,此时由浏览器计算边界值;可以设置1到4个值,为1个值时设置的是上下左右四个边界值,为2个值时设置的是上下、左右边界值,为3个值时设置的是上、左右、下边界值,为4个值时设置的是上、右、下、左边界值;
  position属性:设置元素的定位方式,可选值为static、relative、absolute、fixed等(详见参考文献3),本文中主要用到relative,之前一直以为relative的定位是相对父元素原点,学习参考文献1过程中才发现是相对于元素的正常位置进行移动。
  最后是常用布局的示例代码及页面效果,主要参照自参考文献1,也百度了一些文章对照测试:

单列居中对齐

可以设置margin的左右边界值为auto自动居中,也可以通过position为relative,然后设置left和margin-left值达到居中效果,left设置当前元素的左侧位置为父元素宽度的一半,然后margin-left设置将当前元素向左侧移动元素宽度的一半。

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.middle{
                width: 60%;
                height: 200px;
                background-color: lightblue;
                 margin: 0px auto;   
            }
		</style>
	</head>
	<body>
		<div class="middle">
			单列居中对齐
		</div>
	</body>
</html>
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.middle{
                width: 400px;
                left: 50%;
                margin-left: -200px;
                height: 200px;
                background-color: lightblue;           
                position: relative;
            }
		</style>
	</head>
	<body>
		<div class="middle">
			单列居中对齐
		</div>
	</body>
</html>
两列并排
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            body{
                background-color: lightgoldenrodyellow;
            }
			.left{
                width: 200px;
                height: 200px;
                float: left;   
                background-color: lightblue;             
            }
            .right{
                height: 200px;
                background-color: lightpink;
            }            
		</style>
	</head>
	<body>
		<div class="left">
			左列宽度固定
		</div>
        <div class="right">
			右列宽度自动调整
		</div>
	</body>
</html>
三列并排
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            *{
                margin: 0px;
                border: 0px;
                padding: 0px;
            }
            body{
                background-color: lightgoldenrodyellow;
            }
			.left{
                width: 200px;
                height: 200px;
                position:absolute;   
                top: 0px;
                left: 0px;
                background-color: lightblue;             
            }
            .middle{                
                height: 200px;
                margin: 0px 200px 0px 200px;
                background-color:lightgreen;             
            }
            .right{
                width: 200px;
                height: 200px;
                position:absolute;   
                top: 0px;
                right: 0px;
                background-color: lightpink;
            }            
		</style>
	</head>
	<body>
		<div class="left">
			左列宽度固定
		</div>
        <div class="middle">
			中间宽度自动调整
		</div>
        <div class="right">
			右列宽度固定
		</div>
	</body>
</html>
带标题、页脚,中间三列的布局
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>示例</title>
		<style>
            *{
                margin: 0px;
                border: 0px;
                padding: 0px;
                width: 100%;
				height: 100%;                
            }            
            .whole{
                height: 95%;
            }
            .top{
                background-color:lightgray;
                height: 10%;
                width: 100%;
            }
            .main{
                height: 80%;
            }
			.left{
                width: 20%;
                float: left;
                background-color: lightblue;             
            }
            .middle{  
                width: 60%;        
                float: left;      
                background-color:lightgreen;             
            }
            .right{
                background-color: lightpink;
            }       
            .footer{
                background-color: lightcoral;
                height: 10%;
                width: 100%;
            }     
		</style>
	</head>
	<body>
        <div class="whole">
			<div class="top">顶部标题栏</div>
			<div class="main">
				<div class="left">左列内容</div>
				<div class="middle">中间内容</div>
				<div class="right">右列内容</div>
			</div>
			<div class="footer">页脚信息</div>
		</div>
	</body>
</html>

参考文献:

1\]《DIV+CSS3网页样式与布局全程解密》 \[2\]https://developer.mozilla.org/zh-CN/docs/Web/CSS/display \[3\]https://www.runoob.com/cssref/pr-class-position.html

相关推荐
蔗理苦40 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
qq_510351594 小时前
vw 和 clamp()
前端·css·html
我的写法有点潮6 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
Mo_jon6 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
写不出来就跑路9 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
我的写法有点潮10 小时前
Scss 的四种导入方式你都知道吗
前端·css
Gazer_S21 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
蔗理苦21 小时前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
蔗理苦21 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
JQLvopkk1 天前
CSS学习及心得之二
css·学习·tensorflow