整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
设置浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
设置浮动的元素脱离文档流。
如图我们可以看出框1向右浮动后脱离文档流，直到碰到边缘。框2框3按照正常的文档流顺序排列。
图1 框1浮动
如图2，我们让框1向右浮动，可以清楚的看懂框1浮动之后脱离文档流，不占用空间。三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
图2
如图3，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
图3
我们来看一个例子：
<div class="box"></div>
<p>要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。</p>
我们给它div加点样式,并给它设置左浮动：
按我们说的，div脱离文档流之后，P元素会按照正常的文档流顺序排列，也就是说p元素有一部分是被div挡住的。
为了解决这个，我们可以用clear清除浮动。
clear 属性的值可以是 left、right、both 或 none，它表示给元素的哪一边清除浮动。
一般做法，我们可以写一个空的div，然后给它加一个清除浮动的类：
给类加一个属性clear：
我们看一下效果，
童靴们理解了吗，不懂的可以留言或者私信。
爱学习的孩子运气不会差哦~
关注小白前端，持续收到文章推送！
么是浮动塌陷？
当子元素设置浮动时，父元素中所有孩子盒子都是float，则父容器的高度为0。
1.在父亲盒子中的最下边添加一个空div盒子，并设置clear为相应的值，如果不清除塌陷，那么父元素高度为0，给ul设置高度就没有效果。
clear常见取值如下：
left：清除左侧浮动引起的塌陷；
right：清除右侧浮动引起的塌陷；
both：清除左右两侧浮动引起的塌陷。
2.
先给浮动一个定义:浮动就是程序中定位的一种
那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿
浮动定位：解决了多个块级元素能在一行内显示。
什么是浮动定位。可以用如下几个特点定义。
特点一：将元素排除在文档流之外，即元素脱离文档流，不受默认排列方式（从上到下或者从左往右）的控制
特点二：浮动起来的元素将不再占用页面的空间。（元素从浏览器上原地拔起，从上往下依旧能看到浮动元素），有可能会压住其他的元素。
特点三：元素会停靠在包含框（父层元素）的左边或左边，或者停靠在已经浮动的元素的左边或者右边
特点四：元素无论怎么浮动，最终还是在包含框之内。
特点五：块级浮动之后，宽度自适应不是100%
特点六：行内元素浮动后，除了具备以上特点，它将变成块级元素，行内元素设置浮动多数是为了改变宽和高。
浮动属性：
float:定义当前元素浮动
取值：
none（默认没浮动）
left（浮动方向左边）
right（浮动方向右边）
下面做一个小练习希望对web爱好者有一个小小的帮助。可以拿代码过去看效果哦！
<!DOCTYPE HTML>
<html>
<head>
<title>文字属性</title>
<meta charset="utf-8">
<style>
div{
width:200px;
height:200px;
}
#d1{
background-color:red;
float:right;
/*一共三个div块级元素上下排列，设置第一个div向右浮动，后面两个补上*/
}
#d2{
background-color:yellow;
}
#d3{
background-color:green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
更多知识关注小编，或者百度网络营销师钟震，钟震讲网络营销。会有很多相关知识，公众号网络营销师钟震，以后每天都会分享web，淘宝运营，竞价，网站建设和优化，社媒方面的知识。与大家共同进步。希望对您有一点点帮助，喜欢记得关注公众号。
*请认真填写需求信息，我们会在24小时内与您取得联系。
