浮动定位:
当我们想要让一个大盒子里面的元素并排排列的时候,这个时候就要用到浮动,让元素浮动起来,分别向左向右浮动,达到并排排列的效果。
浮动定位使元素脱离文档流,使用float来设置定位,clear来清除定位.
1. float属性
常用情景:
(1)图文混排,将区域向左向右进行浮动
(2)多列布局,将一个区域分为多个列
属性取值:左浮动-left,右浮动-right,无浮动-none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: left;
background:#FFEBCD;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
属性特点:
设置浮动后元素脱离文件流,原有的位置丢失
2. clear属性清除浮动
属性:
both:清除元素左右两侧的浮动
left和right:只清除左侧和右侧的浮动
none:默认值,只在需要溢出已指定的清除值时用到
应用情景
(1)单侧清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box1{
width:200px;
height:100px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: right;
background:#FFEBCD;
}
.box2{
width:200px;
height:100px;
border: 2px solid #f08080;
margin: 2.5px;
padding: 2.5px;
float: right;
clear:right;
background:#FFEBCD;
}
</style>
</head>
<body>
<div class="box1">盒子A</div>
<div class="box2">盒子B</div>
</body>
</html>
(2)处理空位
3. 练习巩固
(1)三行一列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 660px;
background-color: #616130;
}
#header{
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#main{
height: 500px;
background-color:#4F9D9D;
margin-bottom: 2.5px;
}
#footer{
height: 60px;
background-color: #7373B9;
margin-bottom:2.5px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
(2)一行两列的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 500px;
background-color: #616130;
}
#aside{
float: left;
width: 150px;
height: 500px;
background-color: #7373B9;
}
#content{
float: right;
width: 848px;
height: 500px;
background-color: #4F9D9D;
}
</style>
</head>
<body>
<div id="container">
<div id="aside">aside</div>
<div id="content">content</div>
least body
</div>
</body>
</html>
(3) 三行两列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 660px;
background-color: #616130;
}
#header{
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#main{
height: 500px;
margin-bottom: 2.5px;
}
#aside{
float: left;
width: 150px;
height: 500px;
background-color: #7373B9;
}
#content{
float: right;
width: 848px;
height: 500px;
background-color: #4F9D9D;
}
#footer{
height: 60px;
background-color: #7373B9;
margin-bottom:2.5px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="aside">aside</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
(4)4行三列的布局
扫描二维码关注公众号,回复:
8616248 查看本文章
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="CSS/浮动style.css">
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="nav"></div>
<div id="main">
<div id="aside1" class="aside">aside1</div>
<div id="content">content</div>
<div id="aside2" class="aside">aside2</div>
</div>
<div id="footer">footer</div>
least body
</div>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
}
body{
font-size:30px;
}
#container{
margin: 0 auto;
width: 1000px;
height: 1000px;
}
#header{
background-color:#616130;
height:100px;
background-color:#5B5B5B;
margin-bottom: 2.5px;
}
#nav{
height: 50px;
background-color: #4682B4;
margin-bottom: 2.5px;
}
#main{
height: 500px;
margin-bottom: 2.5px;
}
.aside{
width: 100px;
height: 500px;
background-color: #7373B9;
}
#aside1{
float: left;
}
#content{
float:left;
width: 800px;
height: 500px;
background-color: #4F9D9D;
}
#aside2{
float: left;
}
#footer{
height: 60px;
background-color: #6F00D2;
margin-bottom:2.5px;
}