先来看一段代码

<!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. easyconf——基于AugularJS的配置管理系统开发框架

    目录 1 easyconf的诞生2 easyconf的设计理念 2.1 总体设计 2.2 细节设计 2.2.1 CRUD操作 2.2.2 即时校验 2.2.3 下拉框设计3 easyconf使用指南 ...

  2. HTML与CSS基础知识补遗（一）

    开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...

  3. <Oracle Database>逻辑结构

    逻辑结构 Oracle的逻辑结构是一种层次结构.主要由:表空间.段.区和数据块等概念组成.逻辑结构是面向用户的,用户使用Oracle开发应用程序使用的就是逻辑结构. 数据块 数据块是Oracle最小的 ...

  4. 剑指offer算法_位运算求和

    不用+,-,*,/运算求和,可以分成三步: 1.计算两个数字的异或值,相当于只计算每一位的和,不计算进位,得出结果sum: 2.计算两个数字的与值,相当于求出两个数字的进位,然后左移一位,相当于进位, ...

  5. 基本XML解析---编写

    #import "ViewController.h" #import "DDXML.h" @interface ViewController () @end @ ...

  6. ASP.NET MVC3 Razor 初心者容易遇到的問題(转)

    这是一些相关的文章地址 http://demo.tc/Post/679 http://blog.csdn.net/cheny_com/article/details/6298496

  7. Oracle PL/SQL块

    PL/SQL块 简介 :PL/SQL是 Procedure Language & Structured Query Language 的缩写,是ORACLE公司对标准数据库语言的扩展 PL/S ...

  8. RCP：【转载】插件无法启动的解决方案

    有空了再翻译吧…… Table 2. Run configuration problems Problem Investigate During start you get error message ...

  9. 谈谈final的作用

    前言 一直想写写这个话题.代表公司也面试过一些求职者,每次面试我必问的两个问题之一就是“请你谈一谈对于final关键字的理解”.这是一个简单的小问题,但是不要小看它,通过对这个问题的回答以及一些简单的 ...

  10. require、module、exports dojo中的三个特殊模块标识

    查看dojo源码过程中,发现这三个模块名并不以dojo.dijit.dojox开头,在dojo加载器中属于特殊模块名. require 这是一个上下文智能的加载器. 我们通过dojoConfig配置了 ...