1、什么是浮动?
浮动属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性。
float:left | 在左侧浮动 |
float:right | 在右侧浮动 |
浮动只能在水平方向进行,所以只有向左或向右两种方式。
2、浮动对元素的影响
2.1、对父元素的影响
当某个子元素设置元素浮动后,由于浮动会脱离文档流,所以父元素的宽度会塌陷至0。例如:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
<body>
<div>
<div class="div1">
</div>
</div>
</body>
</html>
可以看到在设置了浮动后,原本的子元素离开了文档流,导致无法将父元素的宽度撑起。
2.2、对同级元素的影响
当两个块级元素同时存在时,其中一个元素设置浮动后,将会出现类似绝对定位中的情况,浮动的块级元素会上移,未浮动的元素将会占据浮动元素原本的位置。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
opacity: 0.4;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div >
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>
可以看到在设置了浮动后,原本的块级元素离开了文档流后,下方的块级元素会忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层。
2.3、父元素对子元素的影响
当一个父元素被浮动时,子元素将撑起他的高度和宽度
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
float: left;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.div3{
width: 200px;
height: 200px;
background-color:chartreuse;
}
</style>
<body>
<div class="div">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</body>
</html>
3、如何消除浮动影响
3.1、使用Clear清除
Left | 清除左侧浮动 |
Right | 清除右侧浮动 |
Both | 清除两侧浮动 |
使用clear进行消除有两种可用的办法,第一种为直接在div中添加,另一种为使用伪类选择器。
首先使用第一种方法举例,以2.1中例子进行示范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.div2{
clear: left;
}
</style>
<body>
<div>
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>
可以看到在div中添加了clear后就消除了浮动元素带来的浮动影响。
使用第二种方法举例,以2.1中例子进行示范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
div::after{
content: '';
display: block;
clear: left;
}
</style>
<body>
<div>
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</body>
</html>
可以看到在使用伪类选择器后也消除了浮动元素带来的浮动影响。
3.2、建立BFC环境
BFC—Block Formatting Context 块级格式化上下文,它是一个环境,是一个独立的渲染区域。但需要条件触发才能生成BFC环境。通常用overflow:hidden来触发BFC环境。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
border: 3px solid black;
overflow: hidden;
}
.div1{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
div::after{
content: '';
display: block;
}
</style>
<body>
<div>
<div class="div1">
</div>
</div>
</body>
</html>
可以看到我在没有使用clear的情况下使用overflow:hidden营造了BFC环境后也可以达到消除浮动影响的目的。