bfc

CSS中高度塌陷问题

阅读更多关于 CSS中高度塌陷问题

一.高度塌陷产生原因：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷二.造成后果：父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面布局混乱三.解决方案： 1.开启父元素的BFC: （1）Block Formatting Context 块级格式化环境（2）BFC是元素的隐含属性，默认是在关闭状态的（3）可以通过一些特殊的样式，来开启BFC （4）开启BFC后元素具有如下特性：父元素的垂直外边距不会与子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动子元素（5）开启BFC的方式有：设置元素浮动设置元素的浮动定位设置元素的类型为inline-block 设置overflow为一个非默认值，一般用overflow：hidden开启BFC 2.在塌陷的父元素最后添加一个空白的div，然后对该div进行清除浮动：（1）代码示例： <div id="box1"> <div id="box2"></div> <div style="clear:both"></div> </div> （2）存在问题：使用这种方式会在页面中添加多余的结构（3）清除浮动：有时希望清除掉其他元素浮动对当前元素产生的影响，可以用clear来完成功能

css中高度塌陷介绍以及定位介绍

阅读更多关于 css中高度塌陷介绍以及定位介绍

浮动的问题——高度塌陷高度塌陷的效果：定义两个元素是父子结构，为子元素设置浮动（父元素不设置高度）；注意：高度塌陷的效果师傅和复制结构的浮现效果；但是在实际开发中，不希望出现这种效果。解决方案——BFC 什么是bfc？块级格式化环境 bfc的开启方式？元素设置float浮动元素的display设置inline-block；元素设置绝对定位； overflow:hidden/auto（非默认值visible）; clear:both/left/right;——必须新增一个子元素（最后） bfc的问题？ //开启BFC实验 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title </ title > < style > .box1 { background-color : pink ; /*height: 200px;*/ width : 300 px ; /*开启BFC的方法*/ /*一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！*/ /*float: left;*/ /*二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。*/ /

关于元素间的边距重叠问题与BFC

阅读更多关于关于元素间的边距重叠问题与BFC

一、边距重叠常见情况 1、垂直方向上相邻元素的重叠（水平方向上不会发生重叠） 2、垂直方向上父子元素间的重叠二、BFC 1、什么是 BFC BFC（Block Formatting Context），即块级格式化上下文，BFC 的元素是一个独立的容器，里面无论如何布局都不会影响到外面的元素 2、创建 BFC 的方法（1）设置 overflow 属性，除了 visible 以外的值（例如 hidden、auto）（2）设置 float 属性，除了 none 以外的值（例如 left、right）（3）设置 position 属性，除了static 和 relative 以外的值（例如 absolute、fixed）（4）设置 display 属性，可以是 flex、inline-block、table-cell... 3、BFC 的使用场景（1）解决元素间的边距重叠问题 -- 分别添加创建了 BFC 的父元素  <body> <div></div> <div></div> </body>  <body> <section> <div></div> </section> <section> <div></div> </section> </body> /* 创建BFC前 */ div { width:

阅读更多关于 BFC

BFC BFC的布局规则一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠三、每个元素的margin box的左边，与包含块border box的左边相接触四、BFC的区域不会与float box重叠。五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。六、计算BFC的高度时，浮动元素也参与计算 BFC触发条件根元素(html) float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible BFC的作用 1、自适应两栏布局 2、清除内部浮动 3、防止margin上下重叠来源： https://blog.csdn.net/qq_41293573/article/details/99223444

BFC和haslayout

阅读更多关于 BFC和haslayout

haslayout 的概念 haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。如何激发 haslayout？大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。 * display: inline-block * height:

浅析BFC

阅读更多关于浅析BFC

原文地址 BFC是什么？ BFC(Block formatting context)翻译为”块级格式化上下文”。光看这个翻译可能大多数都是一头雾水，在了解BFC，我们先了解“BFC”中的“FC”(formatting context)格式上下文。Formatting Context指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。而BFC就是在FC前面加了个B(Block),它规定渲染的区域只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。常见的FC还有IFC(Inline formatting context)。 BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。 BFC的触发条件根元素 float属性不为none

盒子居中 BFC

阅读更多关于盒子居中 BFC

如何让盒子水平垂直居中： 1、设置margin自动auto 上下左右margin都为0 position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; 2、 position: absolute; top: 50%; left: 50%; margin-left: -w/2px;/ 负数，数值是宽度的一半 / margin-top: -h/2px;/ 负数，数值是高度的一半 / 水平居中：margin 0 auto 垂直居中：vertical-align baseline top middle bottom 简述BFC规则，及解决的问题： BFC 块级格式化上下文，它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。内部的标签会在垂直方向上一个接一个的放置; 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin值会发生重叠；每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。 BFC的区域不会与float的标签区域重叠。计算BFC的高度时，浮动子标签也参与计算。 BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。解决问题： 1、外间距折叠 2、自适应两栏或三栏布局。 3

订阅 bfc