闭合浮动

原创 2015年11月20日 16:39:32

原文:那些年我们一起清除过的浮动
一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)?
清除浮动:就是clear,属性有clear:left/right/none;
闭合浮动:就是是浮动闭合,从而减少浮动带来的影响;
两者的区别:
这里写图片描述
通过两个图片的对比,我们可以看出清除浮动和闭合浮动的区别:清除浮动不能解决高度塌陷的问题。
二.浮动
浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
三、闭合浮动的方法

  1. 添加额外标签<div style="clear:both;"></div>
<div class="wrap" id="float1">
<h2>1)添加额外标签</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

优点:通俗易懂,容易掌握;
缺点:添加无意义的标签,违反了结构和表现的分离

  1. 使用 br标签和其自身的 html属性,添加额外标签

    br 有 clear=“all | left | right | none” 属性
<div class="wrap" id="float2">
<h2>2)使用 br标签和其自身的 html属性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>

优点:比空标签方式语义稍强,代码量较少
缺点:同样违反了结构与表现的分离
3. 父元素设置 overflow:hidden
通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1;

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

优点:不存在结构和语义化问题,代码量极少
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素
4. 父元素设置 overflow:auto 属性
同样IE6需要触发hasLayout,演示和3差不多
优点:不存在结构和语义化问题,代码量极少
缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等,
5. 父元素也设置浮动
优点:不存在结构和语义化问题,代码量极少
缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body
6. 父元素设置display:table
优点:结构语义化完全正确,代码量极少
缺点:盒模型属性已经改变,从而造成一系列问题
7. 使用:after 伪元素
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
该方法源自于: How To Clear Floats Without Structural Markup

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }

优点:结构和语义化完全正确,代码量居中
缺点:复用方式不当会造成代码量增加

版权声明:本文为博主原创文章,未经博主允许不得转载。

什么是浮动?为什么要闭合浮动?怎么清除浮动?

一、什么是浮动?为什么要闭合浮动?        浮动是脱离文档的普通流存在的(可以看作是漂浮在普通流上),它可以左右浮动,直到它的外边缘遇到包含框或者另一个浮动框为止(即浮动框不在文档普通流中,所...
  • pengxiaoguai22
  • pengxiaoguai22
  • 2016年09月21日 11:54
  • 1206

JS上下自动漂浮广告,可关闭

一不懂开发的朋友,需要一个左右浮动显示的广告,网上找了一个,放在这里,希望对大家有用。 很简单,只是想能给大家节省一部分时间     // 这是关闭飘浮广告的宽度,请根据你的广...
  • airingyuan
  • airingyuan
  • 2014年12月08日 21:56
  • 3488

Android 6.0 悬浮窗默认关闭解决方案

Android 6.0 悬浮窗默认关闭解决方案前言 在谷歌往Android中加入悬浮窗口功能时就表示希望开发者只用其来做用户通知,修改的悬浮窗功能潜在一定的安全隐患,不过手机厂商可不这么认为,于是...
  • vfush
  • vfush
  • 2016年04月20日 18:24
  • 11611

【clear】闭合浮动(clear)的原理和应用

原作者: 水獭先生 浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows...
  • taotao6039
  • taotao6039
  • 2013年12月31日 17:14
  • 717

解读浮动闭合最佳方案:clearfix(转)

之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法:.clear{clear:both;height:0;overflow:hidden;}上...
  • evilpale
  • evilpale
  • 2016年01月29日 13:40
  • 102

浮动布局——margin & 闭合浮动

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 考察浮动 #content { backgroun...
  • lulalahappy123
  • lulalahappy123
  • 2015年04月19日 15:35
  • 727

为何要清除浮动(闭合浮动)

在文档中存在几种不同的元素表现形式,一种是正常状态,还有两种是设置浮动或者定位的状态。浮动之后的元素,通常我们需要“闭合浮动”,那么闭合浮动的意义何在呢?作为定位又是否脱离了文档流呢? CSS中的定...
  • daimaxiaozi
  • daimaxiaozi
  • 2017年12月14日 18:53
  • 33

什么是浮动?为什么要闭合浮动?

一、什么是浮动?为什么要闭合浮动?        浮动是脱离文档的普通流存在的(可以看作是漂浮在普通流上),它可以左右浮动,直到它的外边缘遇到包含框或者另一个浮动框为止(即浮动框不在文档普通流中,所以...
  • weixin_36187661
  • weixin_36187661
  • 2016年09月20日 15:50
  • 191

vs大括号闭合插件+vs高亮插件.

  • 2017年11月09日 10:19
  • 52KB
  • 下载

闭合导线坐标计算快速求法

  • 2011年10月16日 20:18
  • 60KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:闭合浮动
举报原因:
原因补充:

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