清除浮动--BFC

原创 2018年04月15日 16:25:06

问题:父盒子高度为0,子盒子不占位置,子盒子不会撑开父盒子。

        (下面的标准流盒子,会跑到父盒子中的子盒子下面。)

处理办法:清除浮动。(清除子盒子因为浮动,对父子造成的影响)

使用方法:哪儿出问题就在哪儿给

<body></body> 里面的<div></div>类名标签后加一个clearfix类名。


1.clear:both;

    在左右两侧两侧均不允许浮动,会清除前面元素所有浮动带来的影响 。

2.overflow:hidden

    hidden的意思是超出的部分要裁剪隐藏掉,它在裁剪隐藏时会计算高度,当然浮动流的高度也会被计算在内,也能达到清除浮动的效果。

3.单伪元素标签法

    

    .clearfix:after{

        content: “”;

        height: 0;

        visibility: hidden;        /*是否可见*/

        overflow: hidden;

        dispaly: block;

        clear: both;

    }

.clearfix {

       * zoom: 1;/*IE678*/            /* *表示兼容IE678 */

   }


4.双伪元素标签法

    

.clearfix:before,  .clearfix:after {

        content: “”;

        display: table;

}

.clearfix:after{

    clear: both;

}

.clearfix {

    *zoom: 1;/* *兼容IE678 */

}


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35593985/article/details/79950104

课程中三款开发板原理图和配置全解析-第3季第3部分视频课程

本课程是《朱有鹏老师单片机完全学习系列课程》第3季第3个课程,系统讲解了课程中用到的三款开发板,讲解主要围绕开发板主板设备、光盘资料结构、原理图、例程下载等,目的是让大家进一步熟悉自己手头的开发板,能够下载例程并运行检测,并且能根据需要在光盘中找到相应资料。
  • 2017年08月15日 15:42

BFC与清除浮动

欢迎访文我的博客YangChen’s Blog快投简历了,到时候肯定避免不了要笔试或者面试一些前端题目,所以呢有空把一些基础知识总结下这次说到的是BFC和清除浮动BFC首先说一下什么是BFC,引用下别...
  • yc123h
  • yc123h
  • 2016-05-07 13:05:30
  • 874

CSS清除浮动原理(涉及BFC)和方法

为什么要清除浮动??首先理解浮动框:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。 浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通...
  • jlin991
  • jlin991
  • 2017-03-03 21:36:44
  • 948

用float clear和BFC清除浮动 学习总结

0 views 用float clear和BFC清除浮动 学习总结 CSS兼容性 CSS & CSS3 2015-09-09 CSS定位机制有三种,分别是普通流、浮动和绝对定...
  • helllochun
  • helllochun
  • 2016-06-15 16:12:06
  • 982

【css】笔记---BFC和清除浮动

我对BFC的理解 对css有了解的朋友肯定知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化快级盒子。 BFC:块级格式化...
  • sinat_27339925
  • sinat_27339925
  • 2017-11-01 09:30:00
  • 41

浅谈CSS BFC及其应用

Block Formatting Context,即块级格式上下文。 创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-le...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-06 11:57:53
  • 311

常见样式问题四、利用:after、BFC清除浮动

一、为什么要清除浮动元素浮动后,该元素就会脱离文档流,浮动在文档之上。在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。当元素浮动之后,不会影响块级元素的布局,只会影响...
  • c11073138
  • c11073138
  • 2018-03-05 23:02:01
  • 25

CSS清浮动处理(Clear与BFC)

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 1 doctype html> ...
  • binyao02123202
  • binyao02123202
  • 2014-01-08 07:35:13
  • 3622

总结清除浮动方法大全(7种)

1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素末尾添加一个空的标签例如 ,其他标签br等亦可。 再如: 1)添加额外标签 .main{float:left;} ...
  • u011263845
  • u011263845
  • 2015-04-24 16:14:35
  • 1037

overflow:hidden清除浮动原理

overflow:hidden清除浮动原理 BFC (Block Formatting Context)全称是块级格式化上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但...
  • sunOpar
  • sunOpar
  • 2016-06-15 13:48:38
  • 3332
收藏助手
不良信息举报
您举报文章:清除浮动--BFC
举报原因:
原因补充:

(最多只允许输入30个字)