关于BFC的一些思考

Olivia 发布于2019-08-30 12:50 / 3124人阅读

摘要：两个值都是正值，取最大值，都是负值，取最小值，一正一负则相加。使回到正常位置。需要注意的是使用会把放在最前边。而可以按照，，的顺序放置。另外布局也不会出现中间挤掉两边的情况。

Question

以下三个div将会会如何放置(margin collapsing)？



    
        
            三个元素的外边距折叠

同一个BFC中，相邻的块状元素都是垂直放置吗？

如何清除浮动？根据什么原理？

如何对左侧栏200px，主内容自适应进行布局？

如何使用margin完成圣杯布局（左侧x px，右侧y px，中间自适应），用flex呢？

Answer

以下三个div将会会如何放置？

在同一个BFC中，相邻的块状
元素会发生折叠。两个margin值都是正值，取最大值，都是负值，取最小值，一正一负则相加。那么如题有三个呢，是从父元素往子元素算起，还是子元素往外算起？如果从外往里算，是0，从内往外算是-10px。经测试，是从内往外计算。

live demo

同一个BFC中，相邻的块状元素都是垂直放置吗？

不一定，设置writing-mode值。查看以下Demo。

live demo

如何清除浮动？根据什么原理？

紧挨的块级元素设置clear both来清除浮动，一般会通过:after清除浮动。如Bootstrap的clearfix。

.clearfix {
    display: table;
    content: " ";
    clear: both
}

使父级元素触发一个新的BFC，如overfow:hidden或者display:table。

live demo

如何对左侧栏200px，主内容自适应进行布局？

左栏设置200px的宽，设置浮动，主内容设置overflow:hidden触发一个BFC。因为BFC不会与浮动折叠，所以右侧会自适应。

live demo

如何使用margin完成圣杯布局（左侧x px，右侧y px，中间自适应），用flex呢？

圣杯布局大致结构如下

步骤如下：

.container设置内边距，留出放置左右固定宽度侧栏的宽度。设置min-width:x px（content-box）下，如果.left宽度大于父元素content-box的宽度，自己会被挤下去。

.main，.left，.right设置浮动，.main设置100%的宽度。.main位置固定。

.left设置x px宽度，设置margin-left为-100%，此时与.main左上角重合，设置position:relative，left设为-x px或者right设置x px，.left位置固定。

.right设置y px宽度，把margin-left设为-y px，此时与.main右上角重合，相对定位回到自己的位置。(或者margin-right小于等于-y px，最后不用定位，查看margin demo2)。

footer设置clear:both清除浮动，或者container设置为display:table或者overflow:hidden闭合浮动。使.footer回到正常位置。

另外有flex布局就简单多了。需要注意的是使用margin会把.main放在最前边。而flex可以按照.left，.main，.right的顺序放置。另外flex布局也不会出现中间挤掉两边的情况。

margin demo1
margin demo2
flex demo

云服务器 GPU云服务器人工智能的思考对人工智能的思考 java的一些代码深度学习的一些应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115107.html

细说 CSS margin

摘要：给父元素设置了一个灰色背景，并且没有设置高度，因此高度会随着内容而扩展，设置为。这个元素的位置如下图所示因为元素清除了左浮动，所以元素下移。由于这条规则的存在，导致他们折叠后的不能跟的进行折叠，因此的高度被撑开。作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文着重描述关...

tianren124 2019-08-30 12:48 评论0 收藏0
BFC的一些探究

摘要：它是用于决定盒子的布局及浮动相互影响范围的一个区域。小白反思如果世界的运行都有自我运行的一套机制，那么的世界必然有自己的一套规则。外边距合并当时在回答外边距的问题时，总结出了合并的一条规则必须相邻。最初的梦了解BFC后，能够更深入的明白外边距合并原理。了解BFC后，能够更深入的明白浮动的行为。了解BFC后，知识就是你的，总不会吃亏对吧？哈哈之前有两篇文章《行内元素的一些探索》、《...

curlyCheng 2019-08-30 12:44 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
关于BFC的一些应用

摘要：关于的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。对于结构有一点要求，触发的元素必须位于最后一位。关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的...

Java_oldboy 2019-08-28 18:25 评论0 收藏0