一、浮动
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性
计算
安全
数据库
网络和加速
企业服务
#fd{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#sd{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#container{
width: 400px;
height: 500px;
background-color: darkgray;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
</div>
</body>
</html>二、clear属性
去掉浮动属性（包括继承来的属性）
left、right 去掉元素向左、向右浮动
both 左右两侧均去掉浮动
inherit 从父级继承来clear的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
<div id="text">HelloWorld!</div>
</div>
</body>
</html>#fd{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#sd{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#td{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#container{
width: 280px;
height: 500px;
background-color: darkgray;
}
#text{
clear: left;
}亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
