本文深入探讨CSS中的浮动和定位，包括块元素和行内元素的区别，浮动的基本思想，float和clear属性的使用，以及常见浮动布局的实现，旨在帮助理解CSS在网页布局中的重要性。
目录
前言：
CSS页面布局除了上次说到的盒子模型，浮动和定位也是重中之重。我们首先了解一下网站页面最常见的布局，并且认识块级元素和行内元素，再了解浮动和定位在页面布局中如何使用。
一、页面布局
这是最常见的页面布局方式，通常分为页眉、菜单、内容和页脚。
二、CSS中的块元素和行内元素
因为在CSS中，我们把元素放在盒子中，让它成为一块一块的，方便我们布局，并且在此基础上实现盒子的定位和浮动，所以我们非常有必要认识块元素和行内元素。
1、块元素（block）
容器类标签div , h系列 , li , dt ,dd，p都属于块元素，占据了全部的宽度,在前后都有换行符。可以设置宽和高。
2、行内元素（inline）
文本类标签除p标签外如span , ，strong，a , b , i , u , em都属于行内元素,与其他行内元素并排,不能设置宽高，默认的宽度就是文字的宽度。
3、行内元素转换为块元素
display属性:display:block; /可以让行内元素表现得像块元素一样/
三、CSS定位
1、定位的基本思想
它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
2、CSS定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
(1) 普通流：除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
block元素（如p、h、div）（块级框）从上到下一个接一个的排列。
inline元素（如span、strong元素）在行中水平布置。
(2) 浮动：可以左右移动，直到碰到包含框或其它浮动框；
(3) 绝对定位：可以直接将元素定位在页面上的任何位置(设置元素在页面中的位置坐标)。
3、CSS相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
position: relative; /*相对定位*/
top: 30px;
left: 20px;
4、CSS绝对定位
设置为绝对定位的元素框从文档流完全删除，绝对定位使元素的位置与文档流无关，因此不占据空间。
position: absolute; left: 30px; top: 20px;
position: absolute; /*绝对定位*/
top: 30px;
left: 45px;
z-index: -2; /*z-index用来控制层级，值越高，显示在上层*/
visibility:visible; visibility用来表示元素是否可见，默认值为visible */
display: none; /*display中的none隐藏元素后不显示不占空间，即不保留原有的物理空间，visibility中的hidden隐藏元素后占空间*/ 
四、CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1、认识浮动
(1)、框向右浮动
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
(2)、框向左浮动
A、当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
B、 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
(3) 、浮动的其他情况
A、包含框太窄
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
B、浮动高度不同
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
2、CSS中float属性
A、float属性定义元素在哪个方向浮动。
B、在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
C、float属性的值有left(向左浮动),right(向右浮动),none(默认值，不浮动),inherit(从父元素中继承)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
float:right
}
</style>
</head>
<body>
<img src="../image/1.gif" alt="">
<p>这个段落右边有一个图片浮动</p>
<p>这个段落右边有一个图片浮动</p>
<p>这个段落右边有一个图片浮动</p>
<p>这个段落右边有一个图片浮动</p>
<p>这个段落右边有一个图片浮动</p>
</body>
</html>
3、CSS中的clear属性
A、clear 属性规定元素的哪一侧不允许其他浮动元素。
B、clear属性的值有left(左不允许元素浮动),right(右不允许元素浮动),none(默认值，允许浮动出现在两侧),both(两侧都不许浮动)inherit(从父元素中继承)。
4、常用浮动布局
(1)、一列固定宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
} /*不加就会默认边距*/
#d1{
width: 400px;
height: 350px;
background-color: darkslateblue;
margin: auto; /* margin为auto是一列固定宽度并自动居中*/
}
#d2{
width: 380px; /*可以设置为百分比*/
height: 280px;
background-color: firebrick;
margin: auto; /*一列自适应宽度*/
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html> 
(2)、两列自适应宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两列自适应宽度</title>
</head>
<style>
#side{
width: 200px;
height: 350px;
background-color: darkslateblue;
float: left;
}
#main{
width: 400px;
height: 350px;
background-color:red;
margin-left: 120px;
/* margin: auto; */ /*此处不能用margin为auto*/
}
</style>
<body>
<div id="side"></div>
<div id="main"></div>
</body>
</html>
(3)、三列自适应宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列自适应宽度</title>
</head>
<style>
#d1{
width: 300px;
height: 120px;
background-color: tomato;
float: left;
}
#d2{
width: 300px;
height: 120px;
background-color: yellowgreen;
float: right;
}
#d3{
width: 300px;
height: 120px;
background-color:blue;
margin: 0 auto;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html> 
五、网页布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局</title>
<style>
*{
margin:0 auto;
padding: 0;
}
/* 设置页眉样式 */
.header{
background-color: darkgrey;
color:red;
text-align: center;
height: 100px;
}
/* 设置顶部导航栏的样式 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 设置 topnav 链接的样式 */
.topnav a{
float: left;
display: block;
color: #f2f2f2;
padding: 20px 20px;
text-align: center;
}
/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.left {
width: 200px;
height: 300px;
background-color:floralwhite;
float: left;
}
.middle{
width: 200px;
height: 300px;
background-color:lightpink;
float: right;
}
.right {
height: 300px;
background-color:gray;
margin: 0 auto;
}
/* 设置页脚的样式 */
.footer{
background-color: darkgrey;
color:red;
text-align: center;
height: 100px;
}
</style>
</head>
<body>
<div class="header">
<h1>header</h1>
</div>
<div class="topnav">
<a href="">link1</a>
<a href="">link2</a>
<a href="">link3</a>
</div>
<div class="content">
<div class="left"><h2>side1</h2></div>
<div class="middle"><h2>side2</h2></div>
<div class="right"><h2>main</h2></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
扫一扫
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
