浮动定义：
浮动：最早期做图文排版的， 用来让块元素同行显示 ，html中块元素有自己排列规则，独占一行。浮动会让元素元素会脱离文档流 ，一旦有浮动，就会产生问题，一定要清除浮动
例如：
<style>
.box1{
width: 100px;
height: 100px;
background-color: #f00;
/* 左浮动，不占位 */
float:left;
}
.box2{
width: 200px;
height: 200px;
background-color: #0f0;
float:left;
}
/* 第二种 清除浮动 */
/* .clearFix{
clear: both;
} */
/* 第三种清除浮动 - 清除浮动带来的影响 加在这里就可以是接下来的元素不受浮动影响*/
/* .box:after{
content: "";
display: block;
clear: both;
} */
.box3{
width: 150px;
height: 150px;
background-color: hotpink;
/* 第一种 不在这里加清除浮动盒子就会被box1 影响，从而上去 加这个清除浮动可以消除上面代码块带来的影响*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>清除浮动的方法：
1.给受到浮动影响的元素添加overflow:hidden - 因为overflow属性会触发 BFC
BFC: block formatting context 块级格式化上下文 - 让元素强制按照块元素的规则进行排列
2.在受到浮动影响的元素前面，添加一个空div，给空div添加样式：clear:both
3.在浮动元素的父标签的伪元素选择器:after中清除浮动 - 类似于空div
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
