有时候浮动会造成高度塌陷或元素的重叠，为了解决这些问题，提出了清除浮动的三种方式。
首先
我们先看一个已经造成高度塌陷的例子（如下图）。展示的图片为：外部 div 未设置高度，高度由内部的 div 所撑开，但内部两个 div 设置了浮动，所以导致了高度塌陷问题。判定方法为，原本在两个正方形下面有一条线。
代码如下：
<style type="text/css">
.box{
border: 1px solid red;
}
.box div{
width: 200px;
height: 200px;
float: left;
}
.div1{
background: red;
}
.div2{
background: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
解决方法
- overflow:hidden，较简单，兼容市面上大部分浏览器。缺点：做开发时，有些公司会严格要求开发技术点，不建议使用。定义：先定义一个类名，然后把定义好的类名赋给浮动元素的父级元素。语法：
.cleartovarflow:hidden}
根据这个示例，则在类选择器 box 里添加即可解决。 - 添加空盒子，较流行。缺点是为了清除浮动，页面添加的空盒子较多，会造成沉余代码，新手容易晕菜。定义：在被浮动的元素（同级元素）后面添加一个空的 div，并且定义一个类名，赋给空 div。语法：
.clear（clear:both}
修改后的代码为：
<style type="text/css">
.box{
border: 1px solid red;
}
.div1{
width: 200px;
height: 200px;
background: red;
float: left;
}
.div2{
width: 200px;
height: 200px;
background: yellow;
float: left;
}
.box .clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="clear"></div>
</div>
</body>
- 最流行、最常用、可兼容所有浏览器。称为万能清除法。非要说缺点就是代码呈大。开发推荐使用。定义：定义一个类名，使用伪元素：after，并把类名赋给被浮动元素的父级元素。语法：
clear:after{display:block；clear:both；content:"."；visibility:hidden；height：0；}clear（zoom：1；}
总结
清除浮动的方法就是这三种方法：空盒子法、overflow：hidden、万能清除法。
附：
有时可能会出现：当设置浮动时，下方的部分移至了上方，因此上方的内容遮住了下方的内容区域。这种情况往往是因为，对于上方的内容区域未设置高度所造成的，有两种解决方案：一、对上方的父级元素设置 overflow：hidden ；二、给上方的部分添加具体的高度。
扫一扫
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
