怎样清算浮动？革除浮动的4种方式

本篇文章给大家带来的内容是关于怎样清算浮动？清除浮动的4种方式，有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

套路1：给浮动元素的父元素增加高度（扩展性不好）

假如一个元素要浮动，那么它的父元素必然要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设定height，实际利用中我们不大大概给所有的盒子加高度，不仅费事，并且不克不及顺应页面的快速转变；别的一种，父容器的高度可以通过内容撑开（比方img图片），实际傍边此办法用的比力多。【引荐阅读：10款浮动结果特效（珍藏）引荐】

套路2：clear:both;

在最后一个子元素新增加最后一个冗余元素，然后将其设定clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾增加的元素必需是一个块级元素，不然没法撑起父级元素高度。

套路3：伪元素清除浮动

上面那种方法当然可以清除浮动，但是我们不想在页面中增加这些没成心义的冗余元素，此时怎样清除浮动吗？

结合 :after 伪元素和 IEhack ，可以完善兼容当前主流的各大阅读器，这里的 IEhack 指的是触发 hasLayout。

套路4：br标签清浮动

br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设定属性clear，并赋值all。即能清除掉浮动。

以上就是对怎样清算浮动？清除浮动的4种方式的全部介绍，假如您想理解更多有关Html5教程，请关注PHP中文网。

以上就是怎样清算浮动？清除浮动的4种方式的具体内容，更多请关注百分百源码网其它相关文章！