您好、欢迎来到现金彩票网!
当前位置:dafa888娱乐场 > 浮动 >

css-清除浮动的原理与方法

发布时间:2019-06-29 04:38 来源:未知 编辑:admin

  浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的“副作用”。一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)的常见缺陷是——

  一个元素设置了浮动后,会影响它的兄弟元素,具体的影响方式较为复杂,这要视乎这些兄弟元素是块级元素还是内联元素:

  》若是块级元素会无视这个浮动的块框,也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行,导致被浮动元素覆盖,除非这些 div 设置了宽度,并且父元素的宽度不足以包含它们,这样兄弟元素才会被强制换行;

  从例子中可以看出,设置了 clear: both 的元素不会跟浮动元素同行,并且会占据新的一整行,而不是根据内容来自动调整宽度。之所以会这样,要从 clear 的原理说起,clear 会为元素添加足够的空白空间,使到该元素的位置会放置在它前一个浮动元素之下,这跟增加元素外边距使到元素占据满行而强制换行的效果是一样的,事实上在 CSS1 和 CSS2 中,清除浮动正是通过自动为清除元素(即设置了 clear 属性的元素)增加外边距实现的,从 CSS 2.1 开始改为增加额外的空白空间,不改变外边距。现在大家应该清楚了,既然是增加足够的空间使到元素换行,那么最稳妥的办法就是使到该元素占据一整行

  现在清除了浮动,但是,这只是清除了浮动对于兄弟元素的影响,而高度塌陷的问题还没有解决,因此,我们需要更高级的清除浮动——闭合浮动。

  为什么叫闭合浮动?因为浮动的元素脱离了普通流,因此对于它的父元素,它并没有闭合,这时候就需要闭合浮动了。这个问题的解决方法经过多年的发展,已经有了比较完善的方法,下面 Kayo 为大家详细介绍三种常用方法。

  下面代码中使用到的 box main left aside 为预先设置了相关 CSS 的类,具体可以查看 Demo 的源码,在其他例子中也是如此。

  空 div 方法很方便,但是加入了没有涵义的 div ,这违背了结构与表现分离的原则,并且后期维护也不方便。

  在浮动元素的父元素上设置了 overflow 的值为 hidden 或 auto ,可以闭合浮动。另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1

  这个方法相对前者更加方便,也更加符合语义要求,只是 overflow 并不是为了闭合浮动而设计的,因此当元素内包含会超出父元素边界的子元素时,可能会覆盖掉有用的子元素,或是产生了多余的滚动条。这也是在 overflow 方法诞生后依然需要寻找更佳方法的原因。

  该方法来源于positioniseverything, 结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout ,具体请看下面的方法。

  显然,相对来说,这个办法不但完美兼容主流浏览器,并且也很方便,使用重用的类,可以减轻代码编写,另外网页的结构也会更加清晰。

  一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

  二是触发浮动元素父元素的 BFC(Block Formatting Contexts, 块级格式化上下文),使得该父元素可以包含浮动元素

  BFC 在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要的地位,很多开发者因为不了解 BFC 的特性而在实际开发中产生很多让人感到莫名其妙的问题。

  在了解了清除浮动的实际原理后,我们不难想象,清除浮动的方法并不只上面提到的三种,例如,利用 BFC 特性,还可以使用以下的方法触发 BFC 并清除浮动。

  给浮动元素的父元素添加浮动,但是这样需要一直浮动到 body ,不建议采取该方法。

  给浮动元素的父元素添加 display: table-cells ,但是这样无疑改变了盒子模型,也不建议使用。

  可以看出,以上这些方法虽然也比较方便,但同时也有很明显的缺点,这也导致了上面三种方法会更加适合实际项目中使用。

  结合语义化的要求,在实际的项目中,Kayo 建议可以使用 overflow 方法或 :after 伪元素方法。使用 overflow 方法,较为方便,在如内部元素全部为浮动元素,并且内容不会超出父元素框等情况可以直接采用 overflow 方法,但该方法毕竟会触发 BFC ,上面已经提到,BFC 的特性是有多个的,为了避免不必要的影响,如果实际需要清除浮动元素的布局比较复杂,可以直接采用 :after 伪元素方法。

  清除浮动的三种方式及其原理浮动元素的特性浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素带来的问题因为浮动元素脱离文档流,所以对于其处于正常文档流中父元素,无法...博文来自:惊蛰小鱼的博客

  为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题1.如下,我给父盒子设置一个boder,内部放两个盒子一个big一个small,未给big和small设置浮动,...博文来自:h_qingyi的博客

  在标准流中内容的高度可以撑起父元素的高度;在浮动流中浮动的元素是不可以撑起父元素的高度的。方式一给前面一个父元素设置高度(用的很少)方式二给后面的盒子添加clear属性clear属性取值:none:默...博文来自:本然233的博客

  转载来源:浮动让我们既爱又恨爱,有了浮动我们可以更加方便的布局.恨,有了浮动他也带来了...博文来自:可乐不要冰的博客

  原文:浮动的清除--四种方法前言--一个父亲不能被自己浮动的儿子,撑出高度。开胃小菜来看一个实验:现在有两个d...博文来自:Quincylk的专栏

  float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决。但是凡是好用的,也容易出错。比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0...博文来自:Searchin_R的博客

  浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局;恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指windows平台的IE浏览器)。也许很多...博文来自:mrfang1413的博客

  首先,感谢廿四桥明月夜我在他转载的文章的基础上自己做了总结和理解,虽然不知道原创是谁,但是灰常的感谢,帮助我们这些前端小白。线.首先什么是浮动:举一个例子lt;!DOCTY...博文来自:sunshine_yinger的博客

  浮动的目的:把多个盒子放在一行上清除浮动的目的:解决父盒子高度为0的问题清除浮动,也称闭合浮动注:本文不兼容IE6原代码:lt;!DOCTYPEhtmlgt;lt;htm...博文来自:lyxuefeng的博客

  清除浮动的四种方式及其原理理解本文介绍了四种清除浮动的方法,并尝试解释其原理。在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的。掌握这些原理,相信你可以根据场景和需求,灵...博文来自:廿四桥明月夜的博客

  一、标准文档流1.1什么是标准文档流我们制作的HTML网页和PS画图软件画图时有本质上面的区别: HTML网页在制作的时候都得遵循一个“流”的规则:从左至右、从上至下 使用PS软件画图时我们想在哪里画...博文来自:的博客

  本文主要讲为什么要清除浮动及解释bfc,及其包含浮动的原理。博文来自:Troubledealer/uestc

  写在前面本篇文章是个人通过对CSS源文档的学习,阅读前辈的博客,以及个人在码代码的过程中的理解。浮动的设计初衷其实浮动的在设计之始只是为了进行图文混排查看官方文档,CSS3官网,后来码农们发现用来几个...博文来自:微米前端

  HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加①新特性:1)绘画2)用于媒介回放的和3)本地离线存储长期存储数据,浏览器关闭后数据不丢失4)的数据在浏览器关闭后...博文来自:筱葭的博客

  以下从浮动到BFC的段落摘自MDN网络开发者float浮动floatCSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动中移除,尽管仍然保持部分的流动性(...博文来自:夏虫不可语冰

  一、浮动的概念浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。二、浮动的影响1.浮动会导...博文来自:Callback的博客

  1增强用户体验2优化代码3减少http的请求4减少服务器端压力5服务器的按需加载...博文来自:努力哈

  一.为什使用        首先,我们来解释一下为什么要使用clearfix(清除浮动)。通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素...博文来自:Monster_WangXiaotu的博客

  说到清除浮动,首先我们要知道为什么清除浮动清除浮动的目的:父元素没有设置高度,里边的子元素都浮动,浮动的子元素不能撑开父元素的高度,导致布局混乱,所以清除浮动是为了让浮动元素撑开父元素的高度清除浮动的...博文来自:东北玛丽的CSDN

  我们先看看浮动导致什么样的效果。正常没有浮动的案例如下:清除浮动的方法tainer{bac...博文来自:MY的博客

  1、额外标签法:这种方法应该说是最简单的一种了,W3C建议在容器的末尾增加一个“clear:both”的元素,强迫容器适应它的高度以便装下所有的float元素左盒子右盒子 //增加一个空div底部2、...博文来自:kylvia的专栏

  上一节已经说明了为什么要清除浮动了。这里我们就来解决浮动产生的各种问题。为什么要清楚浮动?地址:博文来自:Golden_soft的专栏

  本文主要探讨两个问题:为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动,并撑开父元素。 起因CSS的浮动,算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话,...博文来自:Just Code

  浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局;恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指windows平台的IE浏览器)。也许很多...博文来自:kongjiea笔记

  背景位置除了背景背景平铺外,CSS还提供了另一个强大的功能,即背景定位技术,能够精确控制背景在对象中的位置。默认情况下,背景图像都是从元素padding区域的左上角开始出现的,但设计师往往希望背景能够...博文来自:歪脖先生的博客

  divid与divclass什么意思?divid和divclass用法有什么讲究呢?在div、span、p标签、h1、h2等标签中看见id和class使用,id和class是非常常用的标签内属性。di...博文来自:一名屌丝程序员的秘密花园

  方法一(使用空标签带clear属性)标签可以是divbrhr在浮动元素后使用一个空元素如,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清理。优点:简单,代...博文来自:zjbkzj的博客

  HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:(1)display:inline;转换为行...博文来自:zhanglir333的博客

  这几天在学习HTML,这里总结一下块级元素和行内元素的特征和区别,本文也是来自于其他同行的一些文章,在这里感谢一下那些作者,下面先把这些原文粘贴出来博文来自:liuying1802028915的博客

  页面中显示列表(*ngFor/*ngIf指令的使用)继学习笔记5以后,可以将一个Object对象显示在模版文件中(html)真正在项目中,数据是来自后端服务器返回的,此时先创建一些模拟的数据。1.创建...博文来自:W先生

  css的浮动是经常会在实际中运用到,之前我对浮动的理解就是使用float,除此之外没有深入理解,后来发现对于浮动还是有必要深入理解一下。css浮动css的浮动是float属性,该属性没有继承性,默认值...博文来自:贝伦酱

  因为项目中添加这个功能然后研究了一下,记录下供以后回顾悬浮按钮的创建和使用通过UIButton直接创建通过UIWindow创建按钮一.通过UIButton直接创建...博文来自:More丶的博客

  完美解决HTML中footer保持在页面底部问题博文来自:NINE-NINE的博客

  浮动效果满足我们的页面排版要求,使竖列的盒子横向的排列起来。负作用:因为浮动元素脱离了标准文档流,会导致父级元素无法被撑开。解决方式:清除浮动负面效果(三种方式)添加空盒子优点:较流行缺点:为清除浮动...博文来自:star的博客

  清除浮动1)加高法:浮动的元素,只能被有高度的盒子关住。也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适...博文来自:Wu ShanShan的博客

  浮动元素容器的clearing问题1.问题的由来有这样一种情形:在一个容器(container)中,有两个浮动的子元素。        在浏览器中一运行,就会出现意想不到的结果。实际视图是子元素显示在...博文来自:NNNaix的博客

  最近正好又用到 DM368 开发板,就将之前做的编解码的项目总结一下。话说一年多没碰,之前做的笔记全忘记是个什么鬼了。还好整理了一下出图像了。不过再看看做的这个东西,真是够渣的,只能作为参考了。项目效...博文来自:不积跬步,无以至千里

  帐号相关流程注册范围n企业n政府n媒体n其他组织换句话讲就是不让个人开发者注册。 :)填写企业信息不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的。填写公司机构信息,对公账...博文来自:小雨同学的技术博客

  jquery/js实现一个网页同时调用多个倒计时(最新的)nn最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!nnnn//jsn...博文来自:Websites

  jni中arm64-v8a,armeabi-v7a,armeabi文件夹的意义和用法起因之前并没有关注这块,直到:您的应用被拒绝,原因:xplay5sQ心里点击笑值点击拍照显示停止运行,查看发过来的日...博文来自:hss01248的专栏

  扫二维码关注,获取更多技术分享nnn 本文承接之前发布的博客《 微信支付V3微信公众号支付PHP教程/thinkPHP5公众号支付》必须阅读上篇文章后才可以阅读这篇文章。由于最近一段时间工作比较忙,...博文来自:Marswill

  上一篇博客介绍了如何解决Fragment重叠的问题,有需要的同学可以看一下,底部有demo下载。 n直通车:完美解决Fragment重叠本篇博客我们来说一下怎么让fragment重新加载布局资源文件。...博文来自:喻志强的博客

  最近比较有空,大四出来实习几个月了,作为实习狗的我,被叫去研究Docker了,汗汗!nnDocker的三大核心概念:镜像、容器、仓库n镜像:类似虚拟机的镜像、用俗话说就是安装文件。n容器:类似一个轻量...博文来自:我走小路的博客

  错误显示 未能启动录音,nnn原因分析:n我的这里的原因是因为,唤醒的监听还是start的状态,所以唤醒它占用了录音的设备,所以当唤醒之后再想听取用户的录音就会出现未能启动录音的20006 的错误.n...博文来自:Kodulf的专栏

  一、概述最近在springboot项目引入thymeleaf模板时,使用非严格标签时,运行会报错。默认thymeleaf模板对html5标签是严格检查的。二、在项目中加NekoHTML库在Maven中...博文来自:Luck_ZZ的博客

http://hipertonia.com/fudong/124.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有