float: left
浮动也能让块元素并排出现
浮动元素脱离文档流，提升层级
浮动父级塌陷
防止父级塌陷 both 左右都清除
clear: left;
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
border: #0000FF 1px solid;
}
#div1,#div2,#div3{
width: 100px;
height: 100px;
border: #E9185A 1px solid;
float:left;
}
#clear-fix{
/* 防止父级塌陷 both 左右都清除 */
clear: left;
}
</style>
</head>
<body>
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="clear-fix"></div>
</div>
</body>
</html>
网友评论