一. 当初设计float的目的是为了能实现文字能够环绕图片的排版功能
比如看下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
.z1{
height: 200px;
width: 200px;
float: left;
text-align: center;
line-height: 200px;
background: skyblue;
}
.fu {
width: 400px;
}
</style>
<body>
<div class="fu clearfix">
<div class="z1">设置了float为left的图片</div>
<div class="z2">你看，我没有被浮动哥哥挡住哦，这是一段神奇旅行，一天我遇上了白雪公主</div>
</div>
</body>
</html> 复制代码效果图如下：
二. float不会覆盖掉在他之前的正常文档流，这和浏览器渲染机制有关系，会从上到下依次渲染内容，渲染成功后，就不会因为后续元素浮动而使其被覆盖住
比如看下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
.z1{
height: 200px;
width: 200px;
box-sizing: border-box;
float: left;
text-align: center;
background: skyblue;
padding-top: 80px;
opacity: 0.5;
}
.z2 {
background: yellow
}
.z3 {
background: red;
}
.z4 {
background: green;
}
.z5 {
background: pink;
}
</style>
<body>
<div class="fu">
<div class="z2">没有设置任何浮动的容器，背景为黄色</div>
<div class="z3">没有设置任何浮动的容器，背景为红色</div>
<div class="z1">设置了浮动的元素，opacity为0.5</div>
<div class="z4">没有设置任何浮动的容器，背景为绿色</div>
<div class="z5">没有设置任何浮动的容器，背景为粉色</div>
</div>
</body>
</html> 复制代码效果图如下：
从图中的标注和说明我们可以知道，float不会影响前面已经渲染好的文档，而会影响在其后面将要渲染的文档。
三. 我们要知道，z1这个浮动造成了哪些影响，影响如下：
第一个影响：影响了兄弟元素z4,z5的布局。复制代码
第二个影响：影响了父容器的高度，正常父元素的高度是自适应的，高度为其包含的内容总高度， 而内部元素的浮动造成了父容器高度塌陷。并且由于父容器高度塌陷了，将会影响和父元素同级的文档布局。复制代码
四. 清除浮动的方法
对于第一个影响，可以通过给兄弟元素或者父元素的伪元素加一个css属性，clear:both，来解决
对于第二个影响可以通过让父元素触发BFC来解决
可能是最全面最易懂的解析前端浮动的文章复制代码
扫一扫
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
