15-CSS基础-浮动流
浮动
网页的布局方式
浮动元素的脱标
浮动元素排序规则
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
float: right;
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: right;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
<style>
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: left;
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
浮动元素贴靠现象
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-
浮动元素字围现象
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}