Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC的高度时,浮动元素也参与计算。 将margin重合的两个盒子都设置为BFC即可使重叠的margin分开 将浮动元素的父元素设置成BFC可以起到清除浮动的效果 如下图,给left设置浮动,使其脱离文档流,这时left会覆盖right部分区域,解决这个问题可将right设置为BFC。这是因为BFC的其中一个特性:BFC的区域不会与float box重叠。 自适应两栏布局可以按其字面意思理解,可以理解为两个元素横向占满屏幕 不设置right宽度 下图为left分别设置宽度和不设置宽度时的页面
BFC理解及运用BFC解决css bug
BFC的布局规则
如何创建BFC
如何利用BFC处理css bug
利用BFC避免margin重叠。
利用BFC清除浮动
解决浮动覆盖问题
自适应两栏布局
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算