清除浮动的原理剖析

常用的清除浮动的几种方法总结下:

  1,手动设置一个标签(在浮动元素下方),然后对其设置clear属性  

  2,给浮动元素设置 :after伪类,创建块元素,设置clear属性

  3,给父元素设置浮动

  4,给父元素设置overflow设置非visible值(auto,hidden)

  5,给父元素的display设置为table-cell

  7,在ie6,7中,设置zoom或者width,height来触发haslayout,使父元素包含浮动元素

原理剖析:

  1,2方法之所以可以成功,是因为了clear属性。规范上说,对一个元素设置clear属性,那么该元素的上边框紧邻着浮动元素的margin-bottom渲染(假设元素上方为浮动元素,若不是浮动元素,则按照margin的设置进行布局)。这样对height设为auto的父元素而言,高度自然是包含了浮动元素。

  3,4,5方法主要激活了父元素的块级格式化上下文“属性”。块级格式化上下文有一些与块框不同的属性:

    1)包含浮动元素

    2)不会被浮动元素遮盖

    3)防止外边距叠加

  激活BFC的条件有一些,他们是:

    1)设置浮动

    2)设置绝对(固定)定位

    3)设置display:inline-block,table-cell,table-caption(设置为table也可以起作用,但是不是因为是它的功效,是因为设置display:table,css会添加匿名表单,自然也包含table-cell,因此该匿名表单也拥有块级格式化上下文)

    4)overflow:auto || hidden || scroll

  7方法只对IE6,7有效,触发hasLayout的方式:

    1)设置width和height值(非auto)

    2)设置浮动

    3)display:inline-block

    4)zoom:(非auto)

    5)display:absolute

另外,Nicolas Gallagher提出了一种更完美的做法:

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}
.cf:after { clear:both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

  之所以使用 伪元素:before,是为了防止内部元素与该元素的外边距叠加。该元素内部第一个子元素的display设置为table,则会创建一个BFC,避免了外边距叠加。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分享达人秀

手把手教你读懂源码,View的绘制流程详细剖析

上一篇文章我们分析了View的加载流程,今天我们继续来深入学习View的绘制流程,接着上次的View绘制开始,同样使用的是Android 7.1源码。 ...

214100
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

32470
来自专栏用户2442861的专栏

CSS浮动 (比较详细、生动、经典)

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:

26920
来自专栏Android开发实战

Android组件View绘制流程原理分析

如上图,Activity的window组成,Activity内部有个Window成员,它的实例为PhoneWindow,PhoneWindow有个内部类是Dec...

30840
来自专栏河湾欢儿的专栏

浮动与清除浮动

浮动 float半脱离文档流(对元素,脱离文档流;对内容,在文档流) 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了...

9710
来自专栏Golang语言社区

【Go 语言社区】iframe去边框,无边框,使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″...

39470
来自专栏Python研发

CSS

CSS是Cascading Style Sheets的加简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。

22730
来自专栏Coco的专栏

浅析inline-block--使用inline-block创建布局

20870
来自专栏web前端

HTML+CSS高级

第一章 ...

82560
来自专栏用户2442861的专栏

CSS技巧(一):清除浮动

http://www.cnblogs.com/ForEvErNoME/p/3383539.html

8110

扫码关注云+社区

领取腾讯云代金券