什么是浮动元素
浮动元素会根据属性值向左或向右浮动，浮动元素会脱离普通文档流，进入浮动流，浮动流内的浮动元素可以左右移动，直至外边缘碰到包含块或其他浮动元素，会使得块级元素无视浮动元素且行内元素环绕浮动元素
- 观察几种浮动实例
<div class="container">
<div class="box1">float1</div>
<div class="box2">float2</div>
</div>
1.box1,box2全部左浮
image.png
2.box1,box2全部右浮
image.png
3.box2左浮
image.png
4.文字环绕
<div class="box">
<div class="img"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</div>
image.png
清除浮动
- 为什么需要清除浮动呢？
因为浮动元素的特性，有时候会带来一些问题
比如：margin重叠；无法撑开父元素高度；与浮动元素同级的非浮动元素会紧随其后，因为浮动元素脱离文档流，不占据文档流中的位置；可能影响页面结构等 - 清除浮动的方式
1.BFC
margin重叠场景
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.box1 {
width: 100px;
height: 100px;
margin-bottom: 100px;
background-color: rgb(182, 46, 46);
}
.box2 {
width: 100px;
height: 100px;
margin-top: 200px;
background-color: rgb(39, 153, 66);
}
image.png
box1的margin-bottom为100px,box2的margin-top为200px，总margin应为300px,但现在只有200px，我们发现发生了margin重叠的问题，怎么解决呢，我们可以创建一个BFC,BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素,我们让box1处于一个BFC中
解决：
<div class="box">
<div class="box1"></div>
</div>
.box {
overflow: hidden; /* 创建一个bfc */
}
image.png
2.clear属性的空标签(不推荐使用)
//css
.box1,.box2,.box3 {
float: left;
}
.box {
width: 300px;
border: 5px solid #000;
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
image.png
在浮动元素后面设置一个空标签，并设置
clear: both;
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div>
</div>
//css
.clear {
clear: both;
}
image.png
原理：添加一个空标签，利用CSS提高的clear:both清除浮动，让父元素可以自动获取到高度
优点：简单，代码少，兼容所有浏览器
缺点：增加页面的标签，造成结构的混乱
3.:after伪元素
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素之后添加一个看不见的块元素清理浮动
<div class="box clearfix">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
//css
.clearfix::after {
content: '';
display: block;
clear: both;
}
image.png
