浮动是什么？
浮动。什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
浮动可以用来干什么：浮动是CSS布局的利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。
语法：
float: 取值;
三种取值方式
再来举例看看怎么用的
这是正常的一个父级元素里面正常排列三个子元素
效果展示
然后看看我们给父级样式里加入float：left这个语法后再来看看效果
效果如下
可以看到这多个块级元素不再每个横向排列独占一行。而是全部紧挨着横向排列为一排
同样可以试试设置了右浮动后产生了什么效果。
再来看看在给第一个子元素加入了浮动的后的效果
展示效果
看到第一个设置了浮动后第二个绿色块元素不见了
其实这是因为设置了浮动的元素会脱离文档流后，脱离文档流的元素不再占据原有的空间，因此其他的元素上前补位。而且第二个结论，看见绿色的内容被留在蓝色这个块元素里面了，这样出现了文字环绕的效果。
这样看出浮动元素的几个特点
如果将元素设置为浮动之后那么它将具备以下几个特点：
1.浮动元素会被排除在文档流之外，（脱离文档流）元素是不占有之前的页面空间，其他元素会上前补位
2.浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上
3.浮动元素只会在当前行内浮动。
4.浮动元素拥有浮动功能之后依然还存在于父级元素中，只是飘起来了。
5.浮动处理----让多个块元素合成一排。
浮动引发特殊效果
还是以上面的事例为例子
当父级的宽度不够时，最后一个元素将被强制换行
就是这样的情况
第二个是元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下）
把每个div的宽去掉再浮动就会出现
第三个元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大
例如一个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>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
float: left;
}
.son2{
width: 150px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
}
.son3{
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
</body>
</html>
当改变第二元素的宽就会出现文字环绕了
总结
1.父元素的宽度显示不是所有已浮动元素最后一个元素将被强制换行（卡主）
2.元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下）
3.元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大
4.文本和行内元素会进行文字环绕的方式进行排列
浮动元素对父级元素带来的影响
由于浮动元素脱离文档流的所以会导致元素不占有父级元素的空间，那么他会给父级元素带来影响
解决方案
1.直接给父级设置高度
弊端：必须要知道父级元素的准确高度
2.父级浮动
弊端：对后续元素有影响，父级的margin 0 auto 失效
3.为父级父元素添加 overflow:hidden或者auto
弊端： 元素一旦溢出就出被跟着影藏
4.在父级元素里面追加一个空元素 并设置为 clear：both
1323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
