在标准文档流中每一个块级元素，在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。
要实现浮动需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。
float属性
当float属性设置为right时，元素就会向其父元素的右侧移动、当float元素设置为left时，元素则会向向其父元素的左侧移动、当float为none的时候元素不会浮动；
我们来试一下在float值不同的情况下的浮动情况：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.father{
width:300px;
height:300px;
border:1px solid #000;
}
.father div{
width:100px;
height:100px;
}
.son1{
background-color:red;
}
.son2{
background-color:pink;
}
.son3{
background-color:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
</div>
<div class="son2">
</div>
<div class="son3">
</div>
</div>
</body>
</html>
我们在一个大的div容器father里面定义了三个小的div容器，分别是son1、son2、son3，如图所示，son1为红色、son2为粉色、son3为蓝色
image.png
然后我们给son2加上一个float:right;，我们发现son2向右边浮动了，且son3移动到了son2的位置，是因为son2向右浮动脱离了标准文档流，想要解决这个问题我们需要用到清除浮动；
image.png
再试试给son3给加上float:right;，会有效果
image.png
清除浮动
我们知道当某些元素设置了浮动，在页面排版时会影响其他元素的位置，要解决这个问题我们需要使用到清除浮动，来消除浮动元素对其他元素的影响；
在css中一般使用clear元素来清除浮动，且可以规定元素哪一侧不允许其他浮动元素，属性值left表示在左侧不允许浮动元素、属性值right表示在右侧不允许浮动元素
、属性值both表示在左侧和右侧不允许浮动元素、属性值none表示允许浮动元素出现在两侧，默认值；
还用上面的例子，之前我们设置son2向右浮动时，son3的位置也改变了，现在我们来通过具体操作，看看clear元素的具体使用和使用效果吧
在son3中增加clear:both;
.son3{
background-color:blue;
clear:both;
}
image.png
通过这个图片我们可以知道，给son3设置清除浮动后，son3就不会被son2影响了；
网友评论