一、浮动对自身的影响
一旦元素设置了浮动,不管这个元素是什么类型,都会转化为块元素,也就是此时display属性的取值为block。
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
strong
{
float: left;
width: 120px;
height: 60px;
border: 1px solid gray;
line-height: 60px;
text-align: center;
}/*strong为inline元素,但是设置了浮动后变为块元素,这里的strong可以设置width、height、padding、margin*/
</style>
</head>
<body>
<strong>Hello</strong>
</body>
</html>
二、浮动对父元素的影响
当父元素高度小于子元素或者父元素没有说设置高度,父元素不能将子元素包裹起来,这是会造成父元素高度塌陷
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father
{
width: 300px;
border: 1px solid black;
}
#first,#second
{
width: 100px;
height: 50px;
border: 1px solid red;
}
#first
{float: left;}
#second
{
float: right;
}
</style>
</head>
<body>
<div id="father">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>
这是由于父元素为定义高度,造成了父元素高度塌陷
height: 25px;
此时的父元素定义的高度小于元素高度,此时父元素仍然未能包裹子元素,仍然存在父元素高度塌陷问题
height: 75px;
此时父元素定义的高度大于子元素定义的高度,因此不会存在父元素高度塌陷问题
三、对兄弟元素的影响
1、兄弟元素时浮动元素
1.1同一方向的兄弟元素
当浮动元素碰到同一方向的兄弟元素时,这些元素会从左到右、从上到下,紧挨着排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father
{
width: 300px;
height: 30px;
border: 1px solid black;
}
#first,#second
{
float: left;
width: 80px;
height: 80px;
border: 1px solid grey;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #f1f1f1
}
</style>
</head>
<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
</div>
</body>
</html>
1.2相反方向的兄弟元素
当浮动元素为两个相反方向的兄弟元素,这两个元素会移向两边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father
{
width: 300px;
height: 30px;
border: 1px solid red;
}
#first,#second
{
width: 80px;
height: 80px;
border:1px solid grey;
margin-right: 10px;
margin-top: 10px;
background-color: #f1f1f1;
}
#first{float: left;}
#second{float: right;}
</style>
</head>
<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
</div>
</body>
</html>
2、兄弟元素不是浮动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father
{
width: 200px;
height: 150px;
border: 1px solid red;
}
#first
{
width: 80px;
height: 80px;
border: 1px solid gray;
float: left;
background-color: #f4f6f4;
}
#third,#second
{
width: 100px;
height: 30px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="father">
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
</div>
</body>
</html>
由图可知第一个div脱离了文档流并覆盖了第二个和第三个div
当给第二个和第三个div添加一个左浮动,此时第一个div不再覆盖第二个和第三个div
四、对子元素的影响
如果一个元素时浮动元素,并且它的子元素也是浮动元素,那么这个元素会自适应的包含该子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#father
{
width: 300px;
border: 1px solid black;
float: left;
}
#first,#second
{
width: 100px;
height: 50px;
border: 1px solid red;
}
#first
{float: left;}
#second{float: right;}
</style>
</head>
<body>
<div id="father">
<div id="first"></div>
<div id="second"></div>
</div>
</body>
</html>