先来看一段代码

<!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. Android ListView onItemClick Not Work

    Android ListView onItemClick Not Work ListView item中有Button和RadioButton的时候,它的Item点击事件不起作用,需要设置item的属 ...

  2. [UE4][Custom Animation Graph Node]Evaluate Pose by Curve

    目的:根据曲线值获得当前动作帧.用于实现各种通过曲线同步的功能. 方法:继承FAnimNode_Base创建自定义动画节点.重写Evaluate部分.创建相应的AnimGraphNode.可参考前一篇 ...

  3. iOS项目旋转控制

    iOS6的旋屏控制技巧 在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController ...

  4. php CLI 模式下的传参方法

    在CLI模式(命令行界面 Command Line Interface)下,传入参数有如下3种方法: 一. getopt函数(PHP 4 >= 4.3.0, PHP 5) getopt - 从命 ...

  5. switch...case和if...else if的判断应用

    判断成绩所属等级的 两种方法 1...      switch...case方法: #include<stdio.h> int main(void) { ;i <= ;++i) // ...

  6. slot游戏中的数学概念

    最近研究slot 算法,看了大量的英文资料,因为母语中文,一直使用中文的英文小白来说,好心塞,悔不当初没学好英文. 下文是从众多的英文中摘录的唯一能够看明白的概念.先给自己留着,到时候深入研究可以看 ...

  7. mac下android环境搭建笔记(android studio)

    本文记录了本人在mac上配置android开发环境的一些过程,为了方便直接选用了官方的IDE– Android Studio .本文包括了android studio的安装.创建第一个hello wo ...

  8. 微软四十周年 Microsoft’s 40th anniversary

    比尔-盖茨在4月3日给微软全体员工写了这封邮件,原文是英文,我们翻译了中文.图片是后加上的. 明天将是特殊的一天:微软的40周年纪念日. Tomorrow is a special day: Micr ...

  9. 图解集合5：不正确地使用HashMap引发死循环及元素丢失

    问题引出 前一篇文章讲解了HashMap的实现原理,讲到了HashMap不是线程安全的.那么HashMap在多线程环境下又会有什么问题呢? 几个月前,公司项目的一个模块在线上运行的时候出现了死循环,死 ...

  10. angularjs ng-option ie issue解决方案

    最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数 ...