浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
<style type="text/css">
.float-div div{
float: left;
width: 100px;
height: 100px;
margin: 20px;
background-color:#FFFF99;
text-align: center;
line-height: 100px;
}
.normal-div{
width: 100px;
height: 100px;
background-color:#CCCCFF;
line-height: 100px;
}
</style>
<body>
<div class="float-div">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="normal-div">A</div>
</body>
原排版图
方法一：添加空div标签 clear:both
<div class="float-div">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="clear-both"></div>
<div class="normal-div">A</div>
.clear-both{
clear: both;
}
方法二：父级标签定义伪类after
.float-div::after{
display: block;
clear: both;
content: '';
height: 0px;
}
方法三：父级标签overflow:hidden
.float-div{
overflow:hidden;
}
问题解决
正确排版图
网友评论