原文出处:https://blog.csdn.net/samcphp/article/details/79691189?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158710422819725211946450%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158710422819725211946450&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-3
延伸阅读:DIV设置浮动后无法撑开外部DIV的解决办法
先上效果图:
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>css清除浮动,自动撑大外层盒子</title>
<style>
.box {
width: 960px;
margin: 0 auto;
background: green;
}
.left {
width: 200px;
height: 600px;
float: left;
background: red;
}
.right {
width: 750px;
height: 600px;
float: right;
background: blue
}
/*.clear {
-ms-zoom: 1;
}*/
/*清除浮动,才能撑大容器*/
.clear:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box clear">
<div class='left'></div>
<div class='right'></div>
</div>
</body>
</html>
注意:
不仅仅子元素浮动会出现这种情况,其实子元素如果用position脱离文档流布局也会出现这种情况,但不能通过清浮动来解决。
谨记!谨记!