700字范文 > 清除浮动的常用的几种方法

清除浮动的常用的几种方法

时间：2018-09-24 08:46:21

相关推荐

清除浮动的常用的几种方法

首先我们要知道为什么要清除浮动？

如果说一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除（父元素因为子级元素浮动引起的内部高度为0的问题）

首先先写了一个正常的结构是在box没有设置高度的时候，里面是的两个div会默认的撑开，这是在没有设置浮动的时候

<style>.box {width: 800px;border: 1px solid rgb(89, 89, 238);margin: 0 auto;}.damao {/* float: left; */width: 300px;height: 200px;background-color: rgb(36, 211, 218);}.ermao {/* float: left; */width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: rgb(174, 119, 206);}</style> <div class="box"><div class="damao">哒哒哒</div><div class="ermao">喵喵喵</div></div><div class="footer"></div>

但是如果加上浮动的话

这时候能看到box的高度仅仅只有两个边框（2px）

清除浮动本质？

清除元素的本质就是清除元素脱离标准流造成的影响

清除浮动的策略？

闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的方法1（额外标签法又称隔墙法）

这个是W3C推荐的方法（在浮动标签后加一个新的标签，并给其设置clear:both;）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮动之额外标签法</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}.clear {clear: both;}</style></head><body><div class="box"><div class="damao">哒哒哒</div><div class="ermao">喵喵喵</div><div class="clear"></div></div><div class="footer"></div></body></html>

注意:这个新增的盒子要求必须是块级元素不能是行内元素(没有效果)

总结：额外标签法，又称隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式.实际工作可能会遇到,但是不常用。

清除浮动的方法2（父级添加overflow）

可以给父级添加overflow属性，将其属性值设置hidden、auto或scroll。

.box {/* 清除浮动 */overflow: hidden;width: 800px;border: 1px solid blue;margin: 0 auto;}

优点：代码简洁

缺点：无法显示溢出部分

清除浮动的方法3（after伪元素清除浮动）

:after方式是额外标签法的升级版，也是给父元素添加

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}<div class="box clearfix"></div>

优点：没有添加标签，结构更简单

缺点：需要照顾低版本的浏览器

代表网站：百度、淘宝、网易等