2021-05-19

                                                                     css中双伪元素法清除浮动

 

 

 

在关于网页布局的实际开发，我们经常需要使用到让元素浮动的技巧，然而有时元素浮动会影响到网页的整体布局，这时候就要用到清除浮动了。我总结了用双伪元素法清除浮动的步骤，分享给同学们。
1. 双伪元素法：
我们先在网页上放上几个盒子；








放上盒子后的效果是这样：





然后我们给盒子one和two加上浮动





因为one和two两个盒子的父元素box我们没有给它高度，所以当one和two两个盒子被设置了浮动后，one和two脱离了标准流，box下面的盒子就跑上来占据了box原来的地方，如下图所示：



如果我们既想要one和two浮动，又不想让下面的盒子跑上来，就可以用到我们的双伪元素法清除浮动。
首先我们给父元素盒子一个多类名




然后我们按如下代码，用双伪元素把浮动清除，避免浮动影响到网页布局：



可以看到，使用这个方法后，浮动带来的影响被消除了




这是我总结的利用双伪元素法清除浮动的步骤，我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！