css浮动特点
浮动会让元素脱离标准文档流。标准文档流的理解不做阐述(html元素默认都处于标准文档流中)。这里只记录下标准文档流中元素的特点：
块元素：
1、块元素会在标准文档流中独占一行，自上而下排列
2、如果不设置宽高，块元素默认宽度为父元素的100%，高度则被内容撑开
内联元素：
1、内联元素在标准文档流中只占自身的大小，自左向右排列，并会自动换行。
2、内联元素的宽度和高度均由内容撑开，设置宽高无效
而脱离文档流之后，元素的特点为下
块元素：
块元素脱离标准文档流之后，如果不设置宽高，则默认被内容撑开，宽度默认不再为父元素的100%；不再单独占据一行。
内联元素：
内联元素脱离标准文档流，可以设置宽高，但不单独占据一行。
总体来说，脱离标准文档流之后，块元素和内联元素的特点类同。
以上为标准文档流和脱离标准文档流中元素的特点。
当为一个元素设置浮动后，元素会脱离标准文档流。这里记录几个浮动元素特点。
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: #ff0000;
}
.div2{
width: 100px;
height: 100px;
background-color: #ffff00;
}
.div3{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
创建三个div 。运行效果如下：
如果三个div 都设置左浮动，则三个div 会水平排列
.div1{
width: 100px;
height: 100px;
background-color: #ff0000;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: #ffff00;
float:left
}
.div3{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left;
}
现象说明：
1、浮动元素会尽量往父级元素左上角和右上角浮动( float 设置left 或right)
2、脱离标准文档流的块元素，默认被内容撑开，内容的大小就是我们设置的宽高
只设置第一个div 浮动，第二个div宽高设大
.div1{
width: 100px;
height: 100px;
background-color: #ff0000;
float:left
}
.div2{
//为了显示效果，增大宽高
width: 210px;
height: 210px;
background-color: #ffff00;
}
.div3{
width: 100px;
height: 100px;
background-color: #0000FF;
}
运行效果如下：
第一个div脱离文档流后，不再占有文档流中原来的位置。后俩个div 上浮。
如果只设置后俩个div设置为左浮动，第一个div 不浮动，此时效果如下：
.div1{
//不设置浮动
width: 100px;
height: 100px;
background-color: #ff0000;
}
.div2{
width: 100px;
height: 100px;
background-color: #ffff00;
float:left
}
.div3{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left;
}
现象说明：
1、浮动元素会尽量往父级元素左上角和右上角浮动。但如果浮动元素上边是一个没有浮动的块元素，则不会超过该块元素。
2、浮动元素不会超过上边的兄弟元素。
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
