- float:left 元素向左浮动
效果图
1.png
源代码
css
.left{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
html
<body>
<div class="warp">
<div class="left"></div>
</div>
</body>
- float:right 元素向右浮动
效果图
2.png
源代码
css
.right{
float: right;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="right"></div>
</div>
</body>
- float:none 默认值。元素不浮动，安装正常的文档流排列方式
效果图
3.png
源代码
css
.left{
float: none;
width: 200px;
height: 200px;
background-color: orange;
}
.right{
float: none;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
- float:inherit 规定应该从父元素继承float属性的值
效果图
4.png
源代码
css
.warp{
float:left;
}
.left{
float: inherit;
width: 200px;
height: 200px;
background-color: orange;
}
.right{
float: inherit;
width: 200px;
height: 200px;
background-color: purple;
}
html
<body>
<div class="warp">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
