清除浮动的七种方式方法（实例代码讲解）

来源：互联网发布：mac网页视频怎么全屏编辑：程序博客网时间：2024/06/06 04:43

这里写图片描述
实例代码（未清除浮动）：

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

解析：页面开发的时候可以为父级标签添加固定高度，但是有时希望内容能够撑开高度（比如内容不固定的时候）。对于不浮动的元素来说，它们是能够撑开外部div的高度的，但是一旦浮动，元素脱离文档流，父级div就相当于没有了内容（上面的例子中类名为main的高度为0了）。这时是没有办法实现内容撑开高度的。此时需要进行清除浮动对布局造成的一系列影响，所以叫清浮动。（不要误解成把浮动清除了，元素就没有浮动了，不是同一概念）。
下面E良师益友网就为大家分析总结一下清除浮动的方法！

一：空标签清浮动

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}.clear {clear: both;                        /*消除默认行高的影响*/height: 0;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div><p class="clear"></p></div><div class="footer"></div></div></body></html>

注释：上面用p标签进行空标签清浮动，当然可以用别的标签；如果用行元素的话需要进行转化为块，块元素就没有必要转化啦。

二：br标签清除浮动

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div><!-- br标签自带的属性 --><br clear="all" /></div><div class="footer"></div></div></body></html>

三：父元素设置overflow：hidden

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main {overflow: hidden;}.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

四：父元素设置overflow：auto

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main {overflow: auto;}.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

五：父元素浮动

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main {float: left;}.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

注释：使得与父元素相邻的元素的布局会受到影响（影响到了类名为footer的元素）。

六：父元素设置display：table

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main {display: table;}.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}</style></head><body><div class="wrap"><div class="main"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

七：after 伪元素（不是伪类）

<!doctype html><html><head><meta charset="UTF-8"><title>清除浮动方法大全</title><link rel="stylesheet" href="reset.css"><style>.main div {float: left;width: 200px;height: 200px;margin-right: 20px;background: #fcf;}.footer {width: 420px;height: 100px;background: red;}.clearfix:after {clear:both; display:block;height:0;content:"\200B";}.clearfix { *zoom:1; }</style></head><body><div class="wrap"><div class="main clearfix"><div>清除浮动方法大全</div><div>html学习</div></div><div class="footer"></div></div></body></html>

0 0