style样式:
float:left 左浮动
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 990px;
margin: 0 auto;
outline: 1px dashed red;
overflow: hidden;
}
.son{
width: 330px;
height: 500px;
}
.son1
{background-color: lightblue;
float: left;
}
.son2{
background-color: lightgreen;
float: left;
}
.son3{
background-color: lightsalmon;
float: left;
}
body文本:
<body>
<div class="parent">
<div class="son son1">son1</div>
<div class="son son2">son2</div>
<div class="son son3">son3</div>
</div>
</body>
预览效果:
float:right 右浮动
style样式
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 990px;
margin: 0 auto;
outline: 1px dashed red;
overflow: hidden;
}
.son{
width: 330px;
height: 500px;
}
.son1{
background-color: green;
float: right;
}
.son2{
background-color: pink;
float: right;
}
.son3{
background-color: yellow;
float: right;
}
</style>
body文本 同上
效果预览图:
float:none 不浮动
style样式
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 990px;
margin: 0 auto;
outline: 1px dashed red;
overflow: hidden;
}
.son{
width: 330px;
height: 500px;
}
.son1{
background-color: lightblue;
float: none;}
.son2{
background-color: pink;
float: right;
}
.son3{
background-color: yellow;
float: right;
}
</style>
body文本同上
效果预览图: