当前位置:  首页  >  前端开发  >  CSS+DIV

css中after伪类清除浮动的主流方法详解!

本篇文章主要给大家介绍如何用cssafter伪类清除浮动的方法。首先大家要了解什么是css浮动?使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。也可以这样理解:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
本篇文章主要给大家介绍如何用css after伪类清除浮动的方法。

首先大家要了解什么是css浮动

使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

也可以这样理解:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

那么我们为什么要清除浮动呢?

这是因为浮动元素有时会影响整体的布局,产生一些bug。

如下代码:




css浮动示例

    


demo1
demo2

效果如下图:

.demo:after{
    clear: both;
    content: '';
    display: block;
}

最终效果如下:

其实主要原理就是:

利用:after和:before在元素内插入两个元素块,从而达到清除浮动的效果。

本篇文章就是关于用after伪类清除浮动的具体方法介绍,非常简单易懂,希望对需要的朋友有所帮助!】

想要了解更多前端相关知识,可以关注PHP中文网CSS视频教程、Bootstrap教程等等相关教程,欢迎大家参考学习!

以上就是css中after伪类清除浮动的主流方法详解!的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有