可以看一下大神的理解很详细：https://blog.youkuaiyun.com/qq_20404903/article/details/49024247
一、浮动的理解
浮动的框可以向左向右移动，知道它的外边缘碰到包含框（父亲框）或者其他的浮动框位置，因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就行浮动框不存在一样
二、浮动的分类：
left: 左浮动
right: 右浮动
none: 默认值，不浮动
inhert: 继承父亲框的浮动属性
三、怎么理解浮动脱离了标准文档流
1.要搞清这个问题，首先要明白什么是标准文档流
标准文档流布局情况：从上到下、从左至右分布，遇到块级元素换行
2.分析
脱离标准文档流就是不符合上面的分布状况了，而我们的浮动float已经实现遇块级元素不换行了，所以我们只需先证明这一点就行了。
3.演示
没有使用浮动：
代码：
<div style="width:600px;height:500px;background:#FF0;margin:0 auto;">
<div style="width:180px;height:80px;background:#06F">div1</div><div style="width:220px;height:80px;background:#303">div2</div>
</div>
效果图：
div1使用左浮动：
效果图：
4.结论
当div1使用左浮动时，该div已经脱离了原来的轨迹，完全浮动到下个块状元素的上方,下面的块状元素就当做上方没东西，所以就占用了上面的元素的位置
四、我对float的理解
首先要明白什么是行内元素和块状元素
块状元素：可以设置width、height;可以设置内外边距；独占一行（除了使用float之外）
行内元素：不可以设置width、height但是可以使用line-height替代;内外边距（padding、margin）的左右边距可以设置，上下不起作用；不是独占一行
1.使用了浮动之后就相当于将该元素抠出来了，将之放在假想的第二层，不影响下面的块状元素操作，就长做浮动的元素不存在就行了，记住我这里说的是不影响块状元素的操作。
2.两个相邻的浮动元素可以认为是在同一层
3.如果元素（包括块状和行内元素）使用浮动，紧接着的如果是行内元素就相当于使用了左浮动、
下面我对上面的理解用实例来解释一下
实例：
原代码：
<style type="text/css">
#div1{
width: 100px;
height: 50px;
background-color: red;
}
#div2{
width: 200px;
height: 50px;
background-color: green;
}
#div3{
width: 300px;
height: 50px;
background-color: black;
}
#div4{
width: 400px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<input id="input1" type="text" value="input1">
<div id="div4">div4</div>
<input id="input2" type="text" value="input2">
</body>
效果图：
（1）、添加div1的左浮动
效果图
可以得出第一个结论
（2）、div1和div2一起使用左浮动
说明：div1和div2把div3给覆盖了
可以看出来两个浮动元素都在第二层
（3）div3添加左浮动
行内元素input1相当于一个添加了一个float一样与div3一起在第二层
五、当多个浮动在同一行不够位置填充的情况下
如果右侧宽度不够，就向下面显示，首先会找到高度最小的那个，如果右侧还有高度较高的，则在这个高的右侧再找高度最小，知道找到右侧没有较高的，倘若到了最后都没找到，就转到下一行最左侧填充，应该填充在上面的浮动的最突出的水平线之下
看例子
代码：
<style type="text/css">
.div1{
width:120px;
height:50px;
background:pink;
border:1px solid blue;
}
</style>
</head>
<body>
<div style="width:400px;height:300px;border:1px solid red;">
<div class="div1" style="height:100px;">div1</div>
<div class="div1" style="height:80px;">div2</div>
<div class="div1">div3</div>
<div class="div1">div4</div>
</div>
</body>
效果：
现在给四个div都添加上左浮动
div1和div2换一下位置
div2和div3换一下位置
div1和div3换一下位置
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
