本文主要是介绍::after::before清除浮动原理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先来看一段代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>h1{float:left;width:200px;height:200px;background-color:#ccc;}span{display:block;clear:both;}p{width:300px;height:300px;background-color:#f1f1f1;}</style>
</head>
<body><div><h1>我是h1</h1><span></span></div><p>我是p</p>
</body>
</html>在早期我们通过在div标签中添加了一个空的span标签，并且给这个空的span清除浮动。但是这样的话就需要每次都添加一个空的标签，所以一些前辈就想出来用::after::before来清除浮动，从效果上来看，after和before也是一个标签，所以我们就可以利用这个伪元素来清除浮动，从根本上来说它和加一个span标签来清除浮动是一样的。
这个例子的问题就是，如果父盒子没有给高度，但是里面的子元素浮动了，或者绝对定位，固定地位，都会使这个子元素脱离文档流，使父元素不能够获取到子元素的高，也就是不能自适应子元素的高了，既然不能自适应子元素的高了，那么父元素的高就是0，既然是0那么后面的元素自然就跑上来了。
其实最重要的不是after和before，而是浮动的元素找浮动的元素，你通过一个没有浮动的元素将它们隔离开了。
我以前一直不太明白为什么可以直接用clear来清除浮动，还要给这个元素加个空标签，其实是因为虽然你可以清除它上面的浮动，但是它上面的那个盒子的高度还是0。通过给大盒子里面添加元素清除浮动的话，就会触动BFC，使这个盒子和其他的盒子隔离开，使其父元素的高能够自适应子盒子的高。
这篇关于::after::before清除浮动原理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
