作者:笑到哭哈哈 | 来源:互联网 | 2020-08-11 10:20
本篇文章主要给大家介绍如何用cssafter伪类清除浮动的方法。首先大家要了解什么是css浮动?使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。也可以这样理解:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
本篇文章主要给大家介绍如何用
css after伪类清除浮动的方法。
首先大家要了解什么是css浮动?
使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
也可以这样理解:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
那么我们为什么要清除浮动呢?
这是因为浮动元素有时会影响整体的布局,产生一些bug。
如下代码:
效果如下图:
.demo:after{
clear: both;
content: '';
display: block;
}
最终效果如下:
其实主要原理就是:
利用:after和:before在元素内插入两个元素块,从而达到清除浮动的效果。
本篇文章就是关于用after伪类清除浮动的具体方法介绍,非常简单易懂,希望对需要的朋友有所帮助!】
想要了解更多前端相关知识,可以关注PHP中文网CSS视频教程、Bootstrap教程等等相关教程,欢迎大家参考学习!
以上就是css中after伪类清除浮动的主流方法详解!的详细内容,更多请关注 第一PHP社区 其它相关文章!