文章目录
1.浮动元素产生了浮动流,所有产生了浮动流的元素,块级元素看不到他们,产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素(只有块级元素看不到浮动元素)
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>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper{
width: 330px;
height: 330px;
border: 1px solid black;
}
.content{
float: left;
color:fuchsia;
background-color: gray;
width: 100px;
height: 100px;
margin-bottom: 10px;
margin-right: 10px;
}
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<!-- 123 -->
<!-- <img src="../]ZZZ_Q1)]XT$3TZ}[LYQWAQ.png" alt=""> -->
<!-- <div class="demo"></div> -->
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box{
float: left;
width: 50px;
height: 50px;
background-color: pink;
opacity: 0.5;
}
.demo{
/* 设置这个display产生了bfc,并且让div变成了文本类元素*/
display: inline-block;
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</html>
二:父级包住浮动流元素的解决方法(不建议使用这个方法,破坏了结构)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper"></div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<!-- 父级是块级元素,看不到浮动元素,包不住浮动元素,要想包住但是又不想设置宽高
我们可以清除浮动流 clear:both意思就是左右两边的都清除
-->
</div>
<!-- p标签是块级元素 -->
<p></p>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper{
border: 1px solid black;
}
.content{
color:red;
float: left;
background-color: gray;
width: 100px;
height: 100px;
}
p{
border: 1px solid black;
/* clear:both意思就是左右两边的都清除 */
clear: both;
}
</style>
</html>
三:利用伪元素清除浮动
注意:能用clear清除浮动的必须是块级元素 要想这个clear:both;生效，必须是块级元素，伪元素天生是行级元素所以要加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>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper::after{
content:"";
clear:both;
display: block;
}
.wrapper{
border: 1px solid black;
}
.content{
color:red;
float: left;
background-color: gray;
width: 100px;
height: 100px;
}
</style>
</html>
四:产生bfc清除浮动流
凡是设置了position:absolute;float:left/right;从内部把元素转换成inline-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>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper{
/* float: left; */
/* display: inline-block; */
/* position: absolute; */
border: 2px solid red;
}
.content{
color:red;
float: left;
background-color: gray;
width: 100px;
height: 100px;
}
</style>
</html>
设置bfc会从内部转换成inline-block举例
span是行级元素,我们给它设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>span</span>
</body>
<style>
* {
margin: 0;
padding: 0;
}
span {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</html>
五:使用浮动元素后清除浮动流
使用完浮动元素后要清除浮动流,避免影响后面的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="nav">
<li class="list-item">
<a href="#">天猫</a>
</li>
<li class="list-item">
<a href="#">聚划算</a>
</li>
<li class="list-item">
<a href="#">天猫超市</a>
</li>
</ul>
<span>11</span>
</body>
<style>
* {
margin: 0;
padding: 0;
}
a{
text-decoration:none;
}
.nav{
list-style: none;
}
/* 清除浮动流 */
.nav::after{
content: "";
/* 转换为块级元素,后面的元素不会在它后面 */
display: block;
clear: both;
}
.nav .list-item{
float: left;
margin: 0 10px;
height: 30px;
line-height:30px
}
.nav .list-item a{
padding: 0,5px;
color: #f40;
font-weight: bold;
height: 30px;
display: inline-block;
border-radius: 15px;
}
.nav .list-item a:hover{
background-color: #f40;
color: #fff;
}
</style>
</html>