前言
什么是CSS清除浮动?
在非IE浏览器下,当容器的高度为auto(没有设置),且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
添加浮动之前:
添加浮动:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动,则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
我们可以看到,由于没有给父元素.box设置高度。在给子元素添加了浮动之后,父元素变成了一条直线,下方的标准流盒子会往上,被浮动元素压住。
一、四种常用的清除浮动方法
1.额外标签法(隔墙法)
在最后一个浮动标签后,新加一个标签,给其设置clear:both;(不推荐)
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}/* 额外标签法清除浮动 */.clear {clear: both;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动,则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span><!-- 额外标签法 --><div class="clear"></div></div><div class="normal">我是标准流盒子</div></body></html>
结果图:
如果我们清除了浮动,父元素自动检测子盒子最高的高度,然后与其同高。
2.父级添加overflow: hidden
给浮动元素的父级添加overlow: hidden;(不推荐)
优点:书写简单
缺点:溢出隐藏
代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {/* 给父级元素添加overflow清除浮动 */overflow: hidden;width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动,则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图:
通过触发BFC方式,实现清除浮动。
3.父级添加after伪元素
(推荐使用)
优点:结构语义化正确
缺点:由于IE6-7不支持:after,兼容性问题
代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* ::after伪元素清除浮动 */.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}/* IE6,7专有,照顾兼容性 */.clearfix {*zoom: 1;}.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box clearfix"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动,则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图:
4.父级添加双伪元素
(推荐使用)
优点:结构语义化正确
缺点:由于IE6-7不支持:after,兼容性问题
代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 双伪元素清除浮动 */.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}/* IE6-7专有,照顾兼容性 */.clearfix {*zoom: 1;}.box {width: 1000px;border: solid black 1px;}.one,.two,span {/* 向左浮动 */float: left;width: 200px;height: 200px;background-color: pink;margin: 10px;}.normal {width: 300px;height: 300px;background-color: blue;}</style></head><body><div class="box clearfix"><div class="one">one</div><div class="two">two</div><!-- 如果行内元素有了浮动,则不需要转换成块级/行内块元素就可以直接设置高度和宽度 --><span>spanElement</span></div><div class="normal">我是标准流盒子</div></body></html>
结果图:
总结
这篇文章介绍了四种常用的清除浮动的方法,推荐使用的为after伪元素清除浮动与双伪元素清除浮动。
以上代码均可直接复制粘贴运行。