首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

BFC背后神奇原理

BFC 已经是一个耳听熟闻词语了,网上有许多关于 BFC 文章,介绍了如何触发 BFC 以及 BFC 一些用处(如清浮动,防止 margin 重叠等)。 一、BFC是什么?...在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context概念。...BFC区域不会与float box重叠。 BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。...因此,虽然存在浮动元素aslide,但main左边依然会与包含块左边相接触。  根据BFC布局规则第四条:  BFC区域不会与float box重叠。....main { overflow: hidden; }  当触发main生成BFC后,这个新BFC不会与浮动aside重叠。因此会根据包含块宽度,和aside宽度,自动变窄。

77210

小结BFC基本知识与应用

(3)生成BFC元素子元素中,每一个子元素margin与包含块左边界border相接触(对于从左到右格式化,否则相反),即使存在浮动也是如此; (4)BFC区域不会与float元素区域重叠 可应用到两栏布局中...由于“BFC区域不会与float元素区域重叠”,因此可以实现两栏布局。下面应用中会举例阐述。 (5)BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。...BFC解决方法: 可触发另一个非浮动元素生成BFC(overflow:hidden;)。由于“BFC区域不会与float元素区域重叠”,因此可以实现两栏布局。...overflow: hidden; } 效果: bfc解决两栏.png 不过我个人觉得这样做只是让BFC区域不会与float元素区域重叠,实现了两栏布局效果,但并不是自适应两栏布局,上述例子只是刚好父容器宽度...布局内容,可戳我之前两篇文章: 详解CSSFlex布局 实例详解:Flex布局(二) 4.3解决浮动元素父元素高度塌陷问题 举例: <!

3.1K651
您找到你想要的搜索结果了吗?
是的
没有找到

详解 清除浮动 多种方式(clearfix)

如果一个元素中包含元素全部是浮动元素,那么该元素高度将变成0(高度塌陷) 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素高度 优势:极其简单 弊端:必须要知道父元素高度是多少...4、BFC区域不会与float box重叠。 5、BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。...依据BFC布局规则第四条: BFC区域不会与float box重叠。...看代码和效果图,可以看出,这次代码比上面的代码多了一行overflow:hidden;用这行代码触发新BFC后,由于这个新BFC不会与浮动top重叠,所以bottom位置改变了 ...总结 清除浮动方式有很多种,但是实现原理主要是靠clear属性,和触发新BFC,通过详细解释与比较,最后两种内容生成方式是比较推荐使用,如果需要考虑margin重叠问题,就用方案7,不考虑就用方案

1.4K60

毕业设计So Easy:Java Web图书推荐系统平台

使用快速原型工具Axure RP Pro,根据功能设计了需要实现页面的原型:首页、搜索结果页、图书展示页、注册页面、登录页面。...搜索页面页眉页脚与首页相同,正文部分为一个搜索结果列表,显示搜索结果15条记录,每条记录显示图书缩略图、书名、作者、出版社、出版日期、价格以及评分。...正文底部是分页,列出了结果页数,可通过点击来查看后面的搜索结果。右侧列出了热门图书列表,用于向用户推荐。...bookInfo.jsp负责显示图书详细内容,index.jsp负责首页内容显示,login和register负责登录与注册页面,resultList为搜索结果,只是单纯搜索结果列表,用于分页时,...在刚开始,没有对数据库优化之前,页面打开速度几乎需要3秒,对查询SQL进行分析,发现,大部分操作时间消耗在了排序上,于是对排序条件创建了索引,首页首次打开延迟变得小于1秒,并且由于在控制器中使用getter

22350

arXiv创立三十周年之际,创始人在Nature发文:arXiv是信息共享先锋

在万维网出现之前,当时出版商和图书馆员对任何短期内向数字内容过渡持怀疑态度。...2001年,我选择了进入康奈尔大学图书馆(1981年在此获得物理学博士学位),理由是图书馆不会与自己期刊出版业务有潜在利益冲突。尽管是出发点是好,但随着时间推移,这种配合变得越来越糟糕。...不管arXiv未来具体情况如何,预印本传播不再是异端,目前传播量增加趋势不太可能逆转。...自动程序不会休假、生病、分心或繁忙,并能在几毫秒内全面评估全文内容,包括对照整个后台数据库检查每份新提交文件是否有重复或过多文字重叠。...一份预印本报告了关于药物地塞米松严格临床研究结果,导致该研究在作为期刊出版物出现之前半年内被使用,可能挽救了许多生命。

34330

小程序新能力-个人开发者尝鲜微信小程序

但是今天无意间看到公众号头条,个人开发者也可以开发微信小程序了。 ? 今天正好调休在家,就看了如何申请账号,搭建环境以及运行发布项目的。...注册具体细节就不说了,官方有给详细文档,点注册文档 注意:这里并不能直接用之前注册号公众号账户和密码,需要用一个之前没有注册过邮箱来注册一个新小程序账号。...于是我在豆瓣图书这个项目的基础上写了一个简易快递查询小程序——快递一点通 准备API 找了一个可以查询快递第三方网站,通过chrome浏览器开发者工具看了下请求数据过程,大致分为两步 第一步...上图就是我在较慢输入时候,每次输入生成一个post请求。 这次请求主要是为了得到这个快递是来自哪家快递公司,因为在查询快递单号时候你并不需要选在是顺丰还是圆通申通还是韵达等等。...下面就是基于Oopsguy豆瓣图书小程序项目做了一个改动,使之从豆瓣图书搜索小程序编变成查询快递信息快递一点通小程序。 项目结构如下 ?

2.1K50

什么是BFC?看这一篇就够了

它是一个独立渲染区域,只有Block-level box参与, 它规定了内部Block-level Box如何布局,并且与这个区域外部毫不相干。...在解释什么是BFC之前,我们需要先知道Box、Formatting Context概念。...不同类型 Box, 会参与不同 Formatting Context(一个决定如何渲染文档容器),因此Box内元素会以不同方式渲染。...它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素关系和相互作用。...每个盒子(块盒与行盒)margin box左边,与包含块border box左边相接触(对于从左往右格式化,否则相反)。即使存在浮动也是如此。 BFC区域不会与float box重叠

57820

精选Android中高级面试题:性能优化,JNI,设计模式

可达性分析法:通过一系列被称为『GCRoots』对象作为起始点,从这些节点开始向下搜索搜索所走过路径称为引用链,当一个对象到 GC Roots 没有任何引用链相连时,则证明此对象是不可用。...复制算法:把可用内存按容量划分为大小相等两块,每次只使用其中一块。当这一块内存用尽后,把还存活着对象『复制』到另外一块上面,再将这一块内存空间一次清理掉。实现简单,运行高效。...标记 - 清除算法:首先『标记』出所有需要回收对象,然后统一『清除』所有被标记对象。...只有确定了对象无法恢复引用时候才会清除对象内存。...三者如何选择? 如果项目简单,没什么复杂性,未来改动也不大的话,那就不要用设计模式或者架构方法,只需要将每个模块封装好,方便调用即可,不要为了使用设计模式或架构方法而使用。

2.6K30

精选Android中高级面试题 (四):性能优化,JNI,设计模式

可达性分析法:通过一系列被称为『GCRoots』对象作为起始点,从这些节点开始向下搜索搜索所走过路径称为引用链,当一个对象到 GC Roots 没有任何引用链相连时,则证明此对象是不可用。...复制算法:把可用内存按容量划分为大小相等两块,每次只使用其中一块。当这一块内存用尽后,把还存活着对象『复制』到另外一块上面,再将这一块内存空间一次清理掉。实现简单,运行高效。...标记 - 清除算法:首先『标记』出所有需要回收对象,然后统一『清除』所有被标记对象。...只有确定了对象无法恢复引用时候才会清除对象内存。...三者如何选择? 如果项目简单,没什么复杂性,未来改动也不大的话,那就不要用设计模式或者架构方法,只需要将每个模块封装好,方便调用即可,不要为了使用设计模式或架构方法而使用。

1.1K30

Flutter 遇到

条目较少时不触发下拉刷新 RefreshIndicator是根据下拉时偏移量触发刷新,当条目较少时(未占满一个屏幕),ListView不能滚动,所以无法触发下拉刷新,给ListViewphysice...属性设置值为new AlwaysScrollableScrollPhysics(),让ListView在任何情况下都可以滑动,也就可以触发RefreshIndicator刷新。...initState @override bool get wantKeepAlive => true; } Flutter 图片资源加载失败unable to load image/assets 需要在项目...pubspec.yaml中进行配置assets,将images文件下图片加到此位置 info: This class inherits from a class marked as @immutable...your/path/key.jks 【flutter 溢出BUG】 bottom overflowed by 104 PIXELS 一开始直接使用Scaffold布局,body:new Column 然后结果调出键盘时候就报这个错了

1.6K20

Android开源库:手把手教你实现一个简单好用搜索框(含历史搜索记录)

总体设计 下面,将根据功能需求给出特定技术解决方案 5.1 总体解决方案 ? 5.2 项目结构说明 项目工程示意图 ?...功能详细设计 下面将给出详细功能逻辑 6.1 关键字搜索 描述:根据用户输入搜索字段进行结果搜索 原型图 注:关键字搜索功能是因人而异,所以本源码仅留出接口供开发者实现,不作具体实现 ?...(ListView)监听 * 即当用户点击搜索历史里字段后,会直接将结果当作搜索字段进行搜索 */ listView.setOnItemClickListener(new...创建adapter适配器对象 & 装入模糊搜索结果 adapter = new SimpleCursorAdapter(context, android.R.layout.simple_list_item...创建adapter适配器对象 & 装入模糊搜索结果 adapter = new SimpleCursorAdapter(context, android.R.layout.simple_list_item

2.7K10

如果不知道这4种缓存模式,敢说懂缓存吗?

概述 在系统架构中,缓存可谓提供系统性能最简单方法之一,稍微有点开发经验同学必然会与缓存打过交道,最起码也实践过。 如果使用得当,缓存可以减少响应时间、减少数据库负载以及节省成本。...(例如,基于时间日志) 数据是否是只写入一次并被读取多次?(例如,用户配置文件) 返回数据总是唯一吗?(例如,搜索查询) 选择正确缓存策略才是提高性能关键。...; 预加载缓存:在项目启动时或启动后通过程序预加载缓存信息,比如”国家信息、货币信息、用户信息,新闻信息“等不是经常变更数据。...Write-Through模式下,所有的写操作经过缓存,每次向缓存中写数据时,缓存会把数据持久化到对应数据库中去,且这两个操作在一个事务中完成。因此,只有两次写成功了才是最终写成功了。...博主简介:《SpringBoot技术内幕》技术图书作者,酷爱钻研技术,写技术干货文章。

64720

django 1.8 官方文档翻译: 3-4-2 内建显示视图

的确,大多数来自Django开发新手 问题是如何能使得通用视图使用范围更广。...我们可能想要对图书列表按照出版日期进行排序来选择一个简单例子,并且把 最近放到前面: from django.views.generic import ListView from books.models...如果你想要展现某个出版商所有图书列表,你可以使用 同样手法: from django.views.generic import ListView from books.models import Book...前面我们把出版 商名字硬编码到URLconf中,但是如果我们想要编写一个视图来展示任何publisher所有 图书,应该如何处理?...相当方便是, ListView 有一个get_queryset() 方法来供我们重写。在之前,它只是返回一个queryset属性值,但是现在我们可以添加更多逻辑。

1.4K40

一份贪心算法区间调度问题解法攻略,拿走不谢

什么是贪心选择性质呢,简单说就是:每一步都做出一个局部最优选择,最终结果就是全局最优。注意哦,这是一种特殊性质,其实只有一小部分问题拥有这个性质。...比如你面前放着 100 张人民币,你只能拿十张,怎么才能拿最多面额?显然每次选择剩下钞票中面值最大一张,最后你选择一定是最优。 然而,大部分问题明显不具有贪心选择性质。...把这个思路实现成算法的话,可以按每个区间end数值升序排序,因为这样处理之后实现步骤 1 和步骤 2 方便很多: ?...现在来实现算法,对于步骤 1,由于我们预先按照end排了序,所以选择 x 是很容易。关键在于,如何去除与 x 相交区间,选择下一轮循环 x 呢?...由于我们事先排了序,不难发现所有与 x 相交区间必然会与 x end相交;如果一个区间不想与 x end相交,它start必须要大于(或等于)x end: ? 下面看下代码: ?

1.4K10

贪心算法之区间调度问题

什么是贪心选择性质呢,简单说就是:每一步都做出一个局部最优选择,最终结果就是全局最优。注意哦,这是一种特殊性质,其实只有一小部分问题拥有这个性质。...比如你面前放着 100 张人民币,你只能拿十张,怎么才能拿最多面额?显然每次选择剩下钞票中面值最大一张,最后你选择一定是最优。 然而,大部分问题明显不具有贪心选择性质。...把这个思路实现成算法的话,可以按每个区间end数值升序排序,因为这样处理之后实现步骤 1 和步骤 2 方便很多: ?...现在来实现算法,对于步骤 1,由于我们预先按照end排了序,所以选择 x 是很容易。关键在于,如何去除与 x 相交区间,选择下一轮循环 x 呢?...由于我们事先排了序,不难发现所有与 x 相交区间必然会与 x end相交;如果一个区间不想与 x end相交,它start必须要大于(或等于)x end: ? 下面看下代码: ?

1.1K10

clearfix改良及overflow:hidden详解

这篇短文介绍了如何改进clearfix进行增强,同时对overflow:hidden进行了深入解释。...visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */ 如此一来可以使顶边距和底边距保留在盒子内部...但是不要在现有的项目中简单地用这些代码替换你clearfix规则,否则可能会与你原来为了解决边距重叠问题采取解决方案产生冲突。...overflow 在众多关于清除浮动讨论中,出现了overflow:hidden方法,并且这种方法总是被“如果你把绝对定位元素置于div内部,这些元素(超出部分)将会被隐藏”观点击败。...一位前端工程师。他负责项目有 TJK Design 和 ez-css.org. 你可以在twitter上follow他: @thierrykoblentz *.

1.3K80

Android自定义View实现搜索框(SearchView)功能

给我们提供AutoCompleteTextView往往就不够用,在大多情况下我们需要自己去实现搜索框。...提示框数据与输入框输入文本是实时联动,而结果列表只有在每次进行搜索操作时才会更新数据 3. 输入框UI应是动态,即UI随着输入文本改变而改变,如:在未输入文本时,清除按钮 ?...</LinearLayout 就是一个SearchView加上一个结果列表,这些我们在上文分析过了,所以也没什么好说。...{ /** * 搜索结果列表view */ private ListView lvResults; /** * 搜索view */ private SearchView searchView...这里有一个问题是进入该搜索界面时需要加载所有的数据项到内存,当数据项很多时,是否会占用大量内存?如果是应该如何避免?是采用只加载一部分数据形式,还是直接使用搜索词到数据库中查询更优?

4.5K10

运用贪心算法来做时间管理

什么是贪心选择性质呢,简单说就是:每一步都做出一个局部最优选择,最终结果就是全局最优。注意哦,这是一种特殊性质,其实只有一小部分问题拥有这个性质。...比如你面前放着 100 张人民币,你只能拿十张,怎么才能拿最多面额?显然每次选择剩下钞票中面值最大一张,最后你选择一定是最优。 然而,大部分问题明显不具有贪心选择性质。...关键在于,如何去除与 x 相交区间,选择下一轮循环 x 呢?...由于我们事先排了序,不难发现所有与 x 相交区间必然会与 x end相交;如果一个区间不想与 x end相交,它start必须要大于(或等于)x end: 下面看下代码: public int...,所以说相当于区间边界触碰也算重叠: 所以只要将之前算法稍作修改,就是这道题目的答案: int findMinArrowShots(int[][] intvs) { // ...

50540
领券