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、浮动元素不会超过上边的兄弟元素。