浮动和清除浮动
2018-02-23 本文已影响17人
追逐_chase
timg.jpg
浮动的作用就是解决一行之间显示多个盒子，并且盒子的位置可控的一种布局方式，在介绍浮动之前，先说明标准流
标准流
- 它是浏览器子在解析html的标签的默认的一种与稳定，也叫文档流
- 一般情况下，所有的标签都是标准流，浏览器在解析的时候不会按其他方式来解析，而 浮动就是一种脱离标准流的技术
浮动
1.浮动脱离标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: orange;
}
.div2 {
width: 300px;
height: 300px;
background-color: purple;
float: left;
}
.div3 {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<!--
1.浮动元素脱标
2.浮动的元素相互贴靠
3.字围效果
-->
<div class="div1">
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
脱标.png
浮动元素相互贴靠
- 浮动找浮动，不浮动找不浮动
- 浮动会更改元素的显示方式 : inline-block
- 浮动是 原来的位置为基准进行浮动，以自己在没有脱离标准流之前位置
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.div2 {
width: 300px;
height: 300px;
background-color: purple;
float: left;
}
.div3 {
width: 400px;
height: 400px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<!--
1.浮动元素脱标
2.浮动的元素相互贴靠
3.字围效果
-->
<div class="div1">
</div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
浮动找浮动.png
清除浮动
额外标签法 清除浮动
- 在需要清除浮动的地方加入一个额外的标签，然后使用clear:both来清除
- 缺点: 1）会使用大量的额外标签。 2）父容器的高度还是为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.div1 {
background: red;
width: 500px;
border: 1px solid #0CBAFF;
}
.div2 {
background: #FF8500;
height: 250px;
width: 200px;
float: left;
}
.div3 {
background: #009900;
height: 250px;
width: 200px;
float: right;
}
.div4{
background: #0CBAFF;
width: 250px;
height: 400px;
}
//清除浮动
.five {
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
<!--插入额外标签 来清除浮动-->
<div class="five"></div>
<div class="div4"></div>
</body>
</html>
额外标签.png
overflow: hidden清除浮动（不推荐使用）
- 使用这个清除浮动，可以是父容器的高度呈现
- 如果浮动与定位结合起来使用的话将来会发现冲突
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.div1 {
background: red;
width: 500px;
border: 1px solid #0CBAFF;
/*清除浮动*/
overflow: hidden;
}
.div2 {
background: #FF8500;
height: 250px;
width: 200px;
float: left;
}
.div3 {
background: #009900;
height: 250px;
width: 200px;
float: right;
}
.div4{
background: #0CBAFF;
width: 250px;
height: 400px;
}
/*.five {*/
/*clear: both;*/
/*}*/
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
<!--插入额外标签 来清除浮动-->
<!--<div class="five"></div>-->
<div class="div4"></div>
</body>
</html>
overFloat请清除.png
伪元素来清除浮动
- 主要代码
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
/*用来兼容IE浏览器*/
zoom: 1;
}
//使用双微元素
.clearfix:after, .clearfix:before {
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
- 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.div1 {
background: red;
width: 500px;
border: 1px solid #0CBAFF;
}
.div2 {
background: #FF8500;
height: 250px;
width: 200px;
float: left;
}
.div3 {
background: #009900;
height: 250px;
width: 200px;
float: right;
}
.div4{
background: #0CBAFF;
width: 250px;
height: 400px;
}
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
/*用来兼容IE浏览器*/
zoom: 1;
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="div2"></div>
<div class="div3"></div>
</div>
<div class="div4"></div>
</body>
</html>
