先来看一段代码

<!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清除浮动原理的更多相关文章

  1. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  2. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  3. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  4. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  5. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

  6. css浮动布局，浮动原理，清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

  7. CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

    css之浮动布局 本人博客:查看文章   1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...

  8. css清除浮动的原理

    最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...

  9. css清除浮动各方法与原理

    说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...

随机推荐

  1. vb- ----之常用函数

    [VB]常用函数 2007-10-25 10:52 3375人阅读 评论(1) 收藏 举报 vbstringdateintegervbscriptwindows (一)类型转换类函数1. CType( ...

  2. VIM使用(一) VIM插件管理利器－vundle

    有关VIM的文件网上一大堆,这里只是记录一下我新配置环境的步骤．以备查看参考． sudo apt-get install gitgit clone https://github.com/gmarik/ ...

  3. PHP中关于位运算符 与 或 异或 取反

    <?php /** * author:LMS * createTime:2015/07/22 * desctiption:位运算[ & | ^ ~ ] * 与&:如果a.b两个值 ...

  4. xml note

          10. 两种不同的XML分析模型: DOM:所有数据位于内存 SAX:流程性分析,不必把所有数据Load到内存中,可分析大型的XML文件,常用于Servlet-side的XML-xhtml ...

  5. SecureCRT使用sz和rz命令进行文件的上传和下载

    SecureCRT可以使用sz和rz命令进行文件的上传和下载. sz文件下载: 格式:sz 文件名称 即可将服务器的文件下载至本地. rz文件上传: 格式:rz 文件名称 即可将本地文件上传至服务器. ...

  6. ABP框架详解（四）Feature

    ABP框架中存在一个Feature的特性,功能和设计思路非常类似于框架中的Authorization功能,都是来控制用户是否能够继续操作某项功能,不同点在于Authorization默认是应用在IAp ...

  7. 微信公共平台开发-（.net实现）4--发送图文消息

    之前说了让微信发送给关注我们的粉丝普通的文本信息,下面我们来看看如何发送图文信息,需要注意的是这里说的是,让微信发给我们,而不是我们拍个图片发给微信处理,上传图片在以后的再讲.下面是发送图文消息的函数 ...

  8. 分享我开发的网络电话Android手机APP正式版，图文详解及下载

    分享我开发的网络电话Android手机APP正式版,图文详解及下载 分享我开发的网络电话Android手机APP正式版 实时语音通讯,可广域网实时通讯,音质清晰流畅! 安装之后的运行效果: 第一次安装 ...

  9. 继续送假期干货——响应式图片工具smartImg

    中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...

  10. Ubuntu Desktop安装及桌面美化(修复图片)

    Ubuntu Desktop安装及桌面美化 1   开篇概述 本 系统的文章主要是讲互联网方向的开发主题.根据目前主流互联网公司的技术架构,Linux是必不可少的.对于一直习惯于在Windows下工作 ...