2021-05-19

 

                                                                                         利用额外标签法清除浮动

 

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








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





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





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



如果我们既想要one和two浮动，又不想让下面的盒子跑上来，就可以用到我们的额外标签法清除浮动。
先在 box 盒子后面放置一个 div，给它一个类名 clear；然后在 css 中利用类选择器选择到 clear这个元素，使用 clear:both


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



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




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