(译)元素浮动的那些事儿

  原文:http://bitsofco.de/2015/how-floating-works/,作者 Ire Aderinokun 发表于 2015 年 8 月 11 日。

  尽管我们现在用浮动布局已经很少了,但是在一些特殊的需求下,它仍然是唯一可行的解决方案。在这些少见的需求中,浮动元素真正的表现形式并非像我想的那样,这使我倍受挫败。所以我决定研究一下浮动行为的规则,从而可以适当地去使用它。

浮动的规则

  float属性总共可以设置四种值:

.foo {float: left | right | inherit | none
}

  下面这些规则定义了某元素设置为以上几种浮动值时,分别该如何在其父元素乃至文档中进行定位。

  1. 浮动元素对于其父元素“不可见”。

  实际上,浮动元素会脱离其父元素。如果一个父元素仅包裹一个浮动的子元素,它会像空元素那样没有任何高度。这与其只包裹着一个绝对定位元素时的表现是非常类似的。

.parent {position: relative;padding: 10px;
}
.child {float: left 
}

  2. 向左/右浮动的元素,总是会尽可能地向其父元素的顶部及左/右部靠拢。

  一个向左或向右浮动的元素总是会想办法占据这个“最佳”位置。

  3. 如果浮动元素之前定义了一个兄弟元素,那么浮动元素会换行显示。

  尽管浮动元素会尽可能地靠近父元素的顶部,但是如果有任意的非浮动的兄弟元素位于其之前,浮动元素便会被挤下去。无论这个兄弟元素是行内元素还是块元素。这就意味着如果我们定义一个浮动元素位于一个段落之前和之后,得到的结果是完全不同的。

浮动元素位于段落元素之前

浮动元素位于段落元素之后

  一个小学生注:作者的这种说法并不严谨。她仅验证了段落时的情况。而真实情况是这样的:

如果浮动元素位于非浮动元素之前

非浮动元素的类型

浏览器类型

结果

块级元素

IE8、8+、chrome等现代浏览器

永不换行

块级元素

IE7 -

不换行,但当快级元素被显性设置宽度且宽度足够大,父容器不足以在同行排列其与浮动元素时,其会换行位于浮动元素之下。

行内级元素

IE8、8+、chrome等现代浏览器

永不换行

行内级元素

IE7 -

永不换行

如果浮动元素位于非浮动元素之后

非浮动元素的类型

浏览器类型

结果

块级元素

IE8、8+、chrome等现代浏览器

永远换行

块级元素

IE7 -

永远换行

行内级元素

IE8、8+、chrome等现代浏览器

不换行,但当父容器宽度不足以在同行排列两者时,会换行。

行内级元素

IE7 -

永远换行

  如果你想亲自实验一下,猛戳这个测试地址。

  经常有人会遇到浮动元素在IE6下换行的bug,根据上面的规则,只要把浮动元素放置在非浮动元素的前面,这个bug自然会迎刃而解了。

  4. 预先定义的浮动元素可以享受到更佳的位置。

  在HTML标签中,越靠前的浮动元素越能享受规则2中提到的“最佳”位置。例如,假如现在有一些向右浮动的元素,按照HTML中定义的顺序,第一个元素会呈现在最右侧,因为最右侧是离父元素最近的,是“最佳”位置。

<div class="container">            <div class="right">1</div><div class="right">2</div><div class="right">3</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

  5. 相对于尽可能地靠近父元素的左侧和右侧,浮动元素更倾向于靠近其顶部。

  当同一个方向(左/右)有多个浮动元素时,靠后者会选择远离父元素左/右侧,从而尽可能地接近父元素的顶部。这意味着多个相邻的浮动元素会尽可能地一个挨一个地排成一行展示,仅当父元素的宽度不足以包裹它们时,后定义的浮动元素才会被挤下去。

  在这个例子中,相比于元素3,元素2取得了更佳的位置。

  6. 浮动元素不应溢出其父元素。

  一个向左浮动的元素不可以超出其父元素的左侧边。

  一个向左浮动的元素不应该超出父元素的右侧边,除非父元素实在没有位置容纳下它。

浮动的清除

  clear属性常常伴随着float属性而存在。它使我们可以打破浮动元素为文档流带来的变化。我们可以把它设置为以下三个值:

.foo {clear: left | right | both 
}

  当一个元素拥有clear:left属性时,这意味着这个元素必须位于向左浮动的元素之下。如果一个元素的clear属性为both时,它必须位于任意浮动元素之下。

  如果一个元素仅仅清楚了左侧或右侧的浮动,那么向另一侧浮动的元素不会受此影响。

<div class="container">        <div class="left">1</div><div class="left">2</div><div class="left">3</div><div class="right">1</div><div class="right">2</div><div class="right">3</div><p class="clear-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

Clearfix

  我们常常对如何合适地清楚浮动有很多困惑,特别是应付那些古老的浏览器时。我用过的一个非常流行的清除浮动的方法是CSS Mojo中写的,他将下面的样式赋予浮动元素的父元素或者任意在它之后定义的元素:

.cf::after {content:"";display:table;clear:both;
}

  至于为什么这样来使用这些样式,你可以从这篇博客中找到答案。从本质上来说,这个方法也是通过创建了一个不可见的伪元素来达到清除浮动的目的。

  一个小学生注:我们之前一直用的clearfix是这样的:

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

  由于IE7及以下浏览器是不支持display:table的,相比于上面作者提到的方式,虽然要多写几行样式。但胜在支持IE8-。在国内还是老老实实用这个clearfix比较好。

  更多清除浮动的方法可以查看这个demo:清除浮动的7种方法

  注意:上面的.clearfix:after一定要用单冒号,CSS3建议我们对伪元素使用双冒号,与伪类加以区分。现代浏览器识别两种写法,但是IE8仅识别单冒号。如果你写的是双冒号“.clearfix::after”,由于"*zoom:1"IE8也无法识别,这会导致你的clearfix在IE8中无效。

  (全文完)

转载于:https://www.cnblogs.com/dongtianee/p/css-float.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/296596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无法定位程序输入点dxgiget_美国ABB TZIDC 智能定位器调试方法

一、ABBTZID-C 智能定位器安装及操作气路连接使用与定位器气源端口处标识的标准接口连接气源连接定位器的输出与气动执行器的气缸电气连接根据下列接线端子图以及设计要求进行相应的配线(一般只需11&#xff0c;-12&#xff0c;31&#xff0c;-32)11-12控制信号输入端子(DC4---…

这个黑科技小音箱,不用连蓝牙、一触即播

▲ 点击查看以前用蓝牙音箱&#xff0c;都要打开蓝牙找半天&#xff0c;有时还找不到对应的音箱。找到了&#xff0c;连接又很 …… 漫长 ……一句「请等待蓝牙配对」重复好几遍还没连上&#xff0c;整个人都不好了。而今天介绍的这个开物灵犀感应音箱&#xff0c;不用连蓝牙&a…

Win11运行安卓超详细教程!芜湖起飞!

一、前提Windows 11 版本号为 Build 22000.xxx 或更高版本。您的电脑硬件 BIOS/UEFI 支持虚拟化功能。二、支持本教程适用于 Windows 11 正式版和预览版&#xff0c;包括 Dev 频道、Beta 频道和 Release Preview 频道。本教程适用于搭载 Intel 和 AMD 等处理器的 Windows 11 电…

精品教程--Android实战系列源码与教程

下载源码 知识技能概要&#xff1a; 1. 此套为零基础源码与教程 2. 包括了Android应用开发所有技术 3. 配套2011QQ效果实现项目源码 4. 堪称最详细中文源码注释 ...... 详细介绍: 1. 零基础源码与教程 本套源码与教程&#xff0c;由我们具有丰富开发经验的高级程师针对需要学习…

mdx 聚合函数

聚合函数Aggregation(set_express, numeric_express), Aggregation&#xff08;http://msdn.microsoft.com/zh-cn/library/ms145524.aspx&#xff09;执行求和函数, 如果和某些其他求和函数配合的话, 会有变化. 看一个例子 SELECT { ([Measures].[Reseller Sales Amount]), ([M…

被小学数学题套路到哭!这些“逆天”题目,谁做谁知道…

全世界只有3.14 % 的人关注了爆炸吧知识看着孩子的作业题&#xff0c;有多少爸爸妈妈感叹着&#xff0c;幸亏自己毕业早&#xff0c;要不然小学都不能毕业&#xff01;这不&#xff0c;最近一道简单的小学数学题&#xff0c;又刷爆了家长们的朋友圈。一起往下看。算一算图中的这…

ASP.NET性能优化之构建自定义文件缓存

ASP.NET的输出缓存&#xff08;即静态HTML&#xff09;在.NET4.0前一直是基于内存的。这意味着如果我们的站点含有大量的缓存&#xff0c;则很容易消耗掉本机内存。现在&#xff0c;借助于.NET4.0中的OutputCacheProvider&#xff0c;我们可以有多种选择创建自己的缓存。如&…

《Redis核心技术与实战》学习总结(1)

【Redis】| 总结/Edison Zhou0写在开头作为Key/Value键值数据库&#xff0c;Redis的应用非常广泛。在之前多年的工作生涯中&#xff0c;我也只是关注了零散的技术点&#xff0c;没有对Redis建立起一套整体观&#xff0c;但只有建立了系统整体观&#xff0c;才能更好地定位问题和…

饿了么翻车,美团被质疑,马云也赔了40亿,这项技术为什么让人害怕?

全世界只有3.14 % 的人关注了爆炸吧知识人类还没用力AI可能就倒下了8日&#xff0c;一篇《外卖骑手&#xff0c;困在系统里》的文章刷爆了朋友圈。看过的人多半都不好受&#xff0c;除了作为社畜感叹生活不易外&#xff0c;就是感叹外卖系统的AI算法对人类的裹挟是那么的残酷。…

如何强制 .NET 程序以 管理员模式 运行 ?

咨询区 Gold&#xff1a;我有一个 winform 程序部署客户的PC机上&#xff0c;请问我如何通过编码的形式强制让程序以管理员模式运行&#xff1f;回答区 Gaspa79&#xff1a;如果你用的是 Visual Studio 2019&#xff0c;可以通过工具去配置&#xff0c;右键 项目 -> 新建项 …

bitmap 转byte[]后读取_闲谈redis的bitmap

bitmap的原理bitmap就是通过最小的单位bit(8bit 1b 0.001kb)来进行0或者1的设置&#xff0c;表示某个元素对应的值或者状态。一个bit的值&#xff0c;或者是0&#xff0c;或者是1&#xff1b;也就是说一个bit能存储的最多信息是2。优点基于最小的单位bit进行存储&#xff0c;…

序1--年轻正当时(特权)

序1 年轻正当时 这本所谓的书&#xff0c;恐怕不一定能够带还没入门的U杀进FPGA开发的大门&#xff0c;当然也肯定不能达到进阶的目的。但是&#xff0c;姑且应了Bingo老弟所谓的对“图像的直觉”&#xff0c;确实图文并茂的从某一个山寨面把FPGA开发赤裸裸的展现给了大家。 被…

Windows 11 dapr 环境安装

安装其实很简单按照dapr官网操作步骤其实没什么大问题的,不过在没有好的网络访问github的情况下真是有点揪心啦&#xff01;推荐使用 工具 fastgithub 访问githubFast&#xff1a;Github让Github畅通无阻windows 11 下的安装方式1.安装dapr cli 直接到Releases dapr/cli GitH…

日本原装进口雪平锅,煎炸炒煮全搞定,日本人用了 1000 年

▲ 点击查看小爆我虽然热爱烹饪&#xff0c;但不得不说「下厨房」&#xff0c;也是个坑。光是锅&#xff0c;我就要买好几个。为了蒸包子馒头买蒸锅&#xff0c;为了炒菜买炒锅&#xff0c;偶尔想精致喝热牛奶又买了小奶锅&#xff0c;为了煲汤、做点卤味解解馋&#xff0c;买炖…

Android开发学习笔记:浅谈Content Provider

一.Content Provider的概念介绍 Content Providers是所有应用程序之间数据存储和检索的桥梁&#xff0c;它使得各个应用程序之间实现数据共享。是应用程序间共享数据的唯一途径。Content Provider 主要的功能就是存储并检索数据以及向其他应用程序提供访问数据的接口。其中包括…

VS2010插件之NuGet

Visual Studio&#xff08;简写VS&#xff09;是.net程序员开发必不可少的开发工具&#xff0c;随着VS的版本不断的升级和使用用户的扩大&#xff0c;现在针对VS开发了许多的开源免费的插件&#xff0c;大大的方便了程序员的开发&#xff0c;提高了开发效率。今天&#xff0c;我…

C# WPF Caliburn.Micro框架下利用Mef加载其它项目界面

01—前言MEF是微软自家的托管可扩展框架&#xff0c;在这里我把它用成了ioc容器。在Caliburn.Micro框架下&#xff0c;view和viewmodel被注入到CompositionContainer容器中&#xff0c;然后通过名称可以实现view和viewmodel的匹配。利用这一特点&#xff0c;在多人合作项目开发…

女朋友竟然提出这种奇怪的要求......

1 为什么女朋友会提这么奇怪的要求&#xff1f;▼2 我的数学能力▼3 一看就是老龙人了阁下是古墓派传人吧▼4 如果可爱能晋级的话你已经赢了▼5 要做个与众不同的垃圾▼6 女孩子喜欢帅哥是不分年龄的▼‍‍7 单身狗又做错了什么呢&#xff1f;▼扫描这个二维码你将会有机…

Java编码规范,在您进行编码之前应该阅读的规范

为什么80%的码农都做不了架构师&#xff1f;>>> 本文转载于&#xff1a;http://www.web3d.com.cn/new/teach/java3d/2006/11/13/363276161.html Java编码规范 说明 1.1 为什么要有编码规范 编码规范对于程序员而言尤为重要&#xff0c;有以下几个原因&#xff1a; …

.NET Core 如何调试 CPU 爆高?

在这篇文章中我们将会分析一个 CPU 爆高的案例&#xff0c;测试demo链接 &#xff1a;https://docs.microsoft.com/en-us/samples/dotnet/samples/diagnostic-scenarios/ 。你将会学到&#xff1a;如何使用 dotnet-counters 确定真实的 cpu 使用率。使用 dotnet-trace 追踪代码…