使用浮动属性float的可用值:
none:默认。文本或图像会显示于它在文档中出现的位置。
left:文本或图像会移至父元素的左侧;
right:文本或图像会移至父元素的右侧。
1、未使用浮动元素float的文档流如下:
.box{
margin: auto;
width: 400px;
height:400px;
border: 2px solid black;
}
.list1{
width:100px;
height: 250px;
background: red;
}
.list2{
width:100px;
height:100px;
background: green;
border: 1px solid silver;
}
.list3{
width:100px;
height:100px;
background :yellow;
}
效果如下:
2、给list3``使用float取值right,list3将脱离文档流向右浮动直到边框靠着box的边框
.list3{
width:100px;
height:100px;
background :yellow;
float:right;
}
3、给list1使用float取值right,list1脱离文档流向右浮动直到边框靠着box的边框
.list1{
width:100px;
height:100px;
background: red;
float:right;
}
4、给list1使用float取值left,list1脱离文档流向左浮动直到边框靠着box的边框,此时由于list1不占位置,因此list2、list3依次上移。
.list1{
width:100px;
height:100px;
background: red;
float:left;
}
因为list1不占位置,list2上移后在list1的下面,如图:
5、把三个框都向左移动,list1脱离文档流向左浮动到box的左边框为止,而list2、list3向左浮动到前一个浮动框的边缘为止`
.list1{
width:100px;
height:100px;
background: red;
float:left;
}
.list2{
width:100px;
height:100px;
background: green;
float:left;
}
.list3{
width:100px;
height:100px;
background :yellow;
float:left;
}
效果如图:
6、当box的框太窄,不能同时容纳下向左浮动的三个浮动框,那么多余的浮动框就会下移。
.menu{
margin: auto;
width: 250px;
height:400px;
border: 2px solid black;
}
.list1{
width:100px;
height:100px;
background: red;
float:left;
}
.list2{
width:100px;
height:100px;
background: green;
float:left;
}
.list3{
width:100px;
height:100px;
background :yellow;
float:left;
}
效果如图:
list3下移
7、当浮动框高度不同,且box的框太窄,那么原本下移的浮动框会被卡住
.menu{
margin: auto;
width: 250px;
height:400px;
border: 2px solid black;
}
.list1{
width:100px;
height:250px;
background: red;
float:left;
}
.list2{
width:100px;
height:100px;
background: green;
float:left;
}
.list3{
width:100px;
height:100px;
background :yellow;
float:left;
}
效果如图:
list3被卡住