环绕效果：浮动元素会脱离正常的文档流，使得周围的非浮动元素围绕它进行布局。
例子：
Document
.box {
width: 100px;
height: 100px;
background-color: blue;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
左浮动
右浮动
运行结果：
例子：
这是最原本的代码，未做任何设置
body{
margin: 15px;
font-family: Arial;
font-size: 12px;
}
.father{
background-color: aliceblue;
border: 2px red solid;
padding: 5px;
}
.father div{
padding: 10px;
margin: 15px;
border: 2px red solid;
background-color: aqua;
}
.father p {
border: 2px lightblue solid;
background-color: lightblue;
}
#float1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
#float2{
width: 100px;
height: 100px;
background-color: yellow;
}
#float3 {
width: 100px;
height: 100px;
background-color: blue;
}
盒子1
盒子2
盒子3
运行结果:
下面将把盒子1、2设置为向左浮动，盒子3设置为向右浮动
代码如下：
body{
margin: 15px;
font-family: Arial;
font-size: 12px;
}
.father{
background-color: aliceblue;
border: 2px red solid;
padding: 5px;
}
.father div{
padding: 10px;
margin: 15px;
border: 2px red solid;
background-color: aqua;
}
.father p {
border: 2px lightblue solid;
background-color: lightblue;
}
#float1 {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
#float2{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
#float3 {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
盒子1
盒子2
盒子3
运行结果：
下面将清除浮动
代码如下：
body{
margin: 15px;
font-family: Arial;
font-size: 12px;
}
.father{
background-color: aliceblue;
border: 2px red solid;
padding: 5px;
}
.father div{
padding: 10px;
margin: 15px;
border: 2px red solid;
background-color: aqua;
}
.father p {
border: 2px lightblue solid;
background-color: lightblue;
clear: both;
}
#float1 {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
#float2{
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
#float3 {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
盒子1
盒子2
盒子3
运行结果：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/48073.html