收藏
批改状态：合格
老师批语：将注释直接写到图片上, 这属于硬注释, 一张图片说明了一切, 好
Float（浮动）的认识与使用
1.文档流：html元素按照书写顺序进行排列。从左到右，从上到下（标准流）
css的两大功能：1）控制元素的外观，2）控制元素的位置（布局）
2.布局前提:浏览器交出页面的权限，交给用户，将元素从文档流中脱离出来
3.脱离文档流的手段：浮动（float）,绝对定位（postion
4.浮动可以将元素在水平方向上自由移动
float（浮动）：可以使元素在水平方向自由移动。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/style1.css"> -->
<title>浮动（Float）</title>
<style>
.box1 {
width: 150px;
height: 150px;
background-color: pink;
}
.box2 {
width: 150px;
height: 150px;
background: palegreen;
}
.box3 {
width: 200px;
height: 200px;
background: deeppink;
float: right;
}
.box1 {
float: left;
}
.box2 {
float: left;
}
.box4 {
width: 350px;
height: 220px;
background-color: #008856;
/* clear: both; */
}
</style>
</head>
<body>
<!--1.文档流：html元素按照书写顺序进行排列。从左到右，从上到下（标准流）-->
<!--css的两大功能：1）控制元素的外观，2）控制元素的位置（布局）-->
<!--2.布局前提:浏览器交出页面的权限，交给用户，将元素从文档流中脱离出来-->
<!--3.脱离文档流的手段：浮动（float）,绝对定位（postion）-->
<!--4.浮动可以将元素在水平方向上自由移动-->
<h1>浮动练习</h1>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
但是日常的布局中，由于子元素的浮动，而父元素没有设置高度，就会造成父元素的高度坍塌：
解决办法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/style2.css"> -->
<title>Document</title>
<style>
.box1 {
width: 150px;
border: 5px dashed red;
}
.box2 {
width: inherit;
height: 150px;
background-color: skyblue;
}
.box2 {
float: left;
}
/*解决子元素浮动，父元素没设高度的情况i昂*/
/* .box3 {
clear: both;
} */
.box1 {
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
子元素（区块）
</div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
定位postion
定位：将元素重新排列-->
1，静态定位：static，文档流定位，流动布局
2, 相对定位：relative，元素仍在文档流，只是相对于他原来的位置发生偏移
3，绝对定位：absolute 元素脱离文档流，相对与它最近的，具有定位属性的元素进行定位
4，固定定位：fixed、始终相对于浏览器的窗口进行定位。body/html
使用绝对定位来实现三列布局
效果图：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/style5.css">
<title>Document</title>
<style>
.container {
width: 400px;
/*margin:0 auto;*/
}
.header,
.footer {
height: 60px;
background-color: #c60f13;
}
.main {
min-height: 200px;
background: yellow;
margin: 5px auto;
position: relative;
}
/*三列布局*/
.left-1 {
width: 32%;
height: 200px;
background-color: deeppink;
position: absolute;
top: 0;
left: 0;
}
.content-1 {
width: 32%;
height: 200px;
background-color: palegreen;
position: absolute;
top: 0;
left: 34%;
}
.footer-1 {
width: 32%;
height: 200px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="main">
<!--三列布局：绝对定位-->
<div class="left-1">左侧</div>
<div class="content-1">主体</div>
<div class="footer-1">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用浮动和定位来实现三列布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="static/style5.css"> -->
<title>Document</title>
<style>
.container {
width: 400px;
/*margin:0 auto;*/
}
.header,
.footer {
height: 60px;
background-color: #c60f13;
}
.main {
min-height: 200px;
background: yellow;
margin: 5px auto;
position: relative;
}
/*三列布局 :绝对定位方式*/
/*
.left-1 {
width: 32%;
height: 200px;
background-color: deeppink;
position: absolute;
top: 0;
left: 0;
}
.content-1 {
width: 32%;
height: 200px;
background-color: palegreen;
position: absolute;
top: 0;
left: 34%;
}
.footer-1 {
width: 32%;
height: 200px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
}
*/
/* 三列布局：浮动+定位 */
.left-1 {
width: 32%;
height: 200px;
background-color: deeppink;
}
.content-1 {
width: 32%;
height: 200px;
background-color: palegreen;
position: relative;
left: 34%;
top: -200px;
}
.footer-1 {
width: 32%;
height: 200px;
background-color: deepskyblue;
position: relative;
left: 36%;
top: -200px;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="main">
<!--三列布局：浮动+相对定位-->
<div class="left-1">左侧</div>
<div class="content-1 fl">主体</div>
<div class="footer-1 fl">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
