让父元素能感知浮动的子元素 #用伪元素清除浮动

原理: 我们知道,普通元素及你父元素(“高度塌陷”)是无法感知到浮动元素的,而浮动元素是可以感知到它上面的元素的。

我们如何让浮动元素后面的非浮动的兄弟感知到呢,我们知道需要给后面非浮动元素添加 clear: both;属性。

也就是说如果我们给父元素前后都添加一个元素并且它们都感知到中间浮动的元素,那不就可以了(这两个子元素就像两个装置,分别位于元素的顶部与底部)。所以我们只需给父元素添加两个(before、after)伪元素,并设置为块元素(上下都独占一行,是不是更像装置了,哈哈)与 clear: both;即可。

.y-clearfix:before, .y-clearfix:after {
            content: "";
            display: block;
            clear: both;
 }

给父元素添加class="y-clearfix" 即可!

posted @ 2020-11-23 12:46  小庄的blog  阅读(145)  评论(0编辑  收藏  举报