标准文档流与浮动
2019-08-18 本文已影响0人
Yonginggg
标准文档流
HTML制作网页的时候,要遵循 从左到右,从上到下的顺序
空白折叠现象
存在于文字与图片之间
解决方法: 将这些元素放在一排,紧密相连
高低不齐,底部齐平
不同的元素,大小不一样,但是底部是在同意水平线上的
浮动
标准文档流中只有两个元素: 块级元素和行内元素
多个元素排在同一行: 行内元素特点
给元素设置宽高: 块级元素特点
浮动可以让元素脱离标准文档流, 就可以实现多个元素排在同一行并且可以给元素设置宽高
浮动是通过一个浮动属性来实现的
float: left向左移动, right向右移动
- 浮动元素脱离标准文档流,不再占用空间
- 浮动元素的层级比标准文档流里的元素层级高, 会覆盖标准文档流中的元素
- 浮动元素会向左或者向右浮动
使用浮动之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.div1{
width:100px;
height: 100px;
background-color: red;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
}
.div3{
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
image
使用浮动后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.div1{
width:100px;
height: 100px;
background-color: red;
/*给这一个元素使用浮动属性*/
float:right;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
}
.div3{
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
image
红色块移动到右边, 不再占用空间, 飘起来了
清除HTML标签默认内填充和外边距
<style>
*{
margin:0px;
padding: 0px;
}
</style>
浮动的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*清除HTML标签默认内填充和外边距*/
*{
margin:0px;
padding: 0px;
}
.nav{
width: 960px;
height: 40px;
margin-right: auto;
margin-left: auto
}
.nav ul{
/*项目符号去除*/
list-style: none;
}
.nav ul li{
/*每一个li标签向左浮动*/
float: left;
width: 120px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
</ul>
</div>
</body>
</html>
image
清除浮动
经过浮动了元素, 会影响到下面的元素的排列布局
浮动元素的父元素没有将浮动元素包裹着
只要清除了浮动,不会影响到浮动元素下面的排版布局,浮动元素的父元素会将浮动元素包裹着
三种方法
- 给浮动元素的父元素设置一个固定的高度
- 使用清除浮动的样式属性
clear - 使用
overflow:hidden 来清除浮动
设置浮动前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.div1{
width:100px;
height: 100px;
background-color: red;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
}
.div3{
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<h2>浮动与清除浮动</h2>
</body>
</html>
image
设置浮动后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.div1{
width:100px;
height: 100px;
background-color: red;
float: left;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
float: left;
}
.div3{
width:100px;
height: 100px;
background-color: green;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<h2>浮动与清除浮动</h2>
</body>
</html>
image
可以看到影响了底下文字的排版布局
使用clear
clear的三个值:
- clear:left 清除左浮动
- clear:right 清除右浮动
- clear:both 两者都清除
这个属性一般用在最后一个浮动元素的下面, 在最后一个浮动元素的下面放一个空白的div, 作用是清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 600px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
.div1{
width:100px;
height: 100px;
background-color: red;
float: left;
}
.div2{
width:100px;
height: 100px;
background-color: blue;
float: left;
}
.div3{
width:100px;
height: 100px;
background-color: green;
float:right;
}
/*使用清除浮动样式clear*/
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<!-- 在最后一个元素的下面新建一个空白的div -->
<div class="clear"></div>
</div>
<h2>浮动与清除浮动</h2>
</body>
</html>
image
使用overflow:hidden
原意是将溢出的部分进行隐藏
