而元素高度坍塌就导致元素后面的非浮动块状元素会和其重叠，于是他就像脱离文档流了。 前三个特性都是正能量满满，但是最后一个特性却给我们开发者带来了很多麻烦，需要用到clear来清除浮动。...也就是虽然浮动元素高度坍塌，但是设置了clear: both的元素却将其高度视为仍然占据位置。 clear只能作用于块级元素，并且其并不能解决后面元素可能发生的文字环绕问题。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然； 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算； BFC的区域不会与float box重叠；...正确的翻译是“每一个盒子的左外边距应该和包含块的左边缘相接触”。 第一，包含块未必就是父级元素。...上图分析：首先第一个i标签基线与第二行的span标签中的数字的基线对其，所以其位置在中间。其次最后一行的i标签基线对齐幽灵空白节点字母x的基线，没有错位，所以此时最后一行的间隙高度就是字母x的高度。
行盒就是 line-box，也就是一个块级元素展示出的每一行就是一个行盒。块级元素内展示在一行的所有元素共同构成了一个行盒。...这里有一篇写行盒(line box)垂直方向的文章链接描述 ? 4.浮动会脱离普通流 普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。...当我们取消浮动，结果是div占据一整行，span不能设置宽高和内外边距。 ?...那我们就放一个普通元素在父元素的最后，把高度撑开。...因用伪元素可以省一个标签，所以就用伪元素 .clearfix::after { content:''; //在父元素的最后生成一个内容为空的元素。
伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...() 作用类似，但是仅匹配使用同种标签的元素 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素...，等同于:nth-of-type(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素...，来确定元素位置 如一个绝对定位元素的父级和祖父级都为 relative，会相对父级来产生偏移 fixed 指定元素相对于屏幕视口（viewport）的位置来指定元素位置 元素的位置在屏幕滚动时不会改变...因为子元素脱离了父元素的文档流，所以父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。
，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？ ...3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住 ...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...，给其中一个div设置左浮动，为什么第二个div会被第一个div覆盖？ ...3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住
浮动元素依然位于父元素之内 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题 注意 1、一行内，显示不下所有的已浮动元素时，最后一个将换行 2、元素一旦浮动起来之后，那么宽度将变成自适应...由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷） 3.如何清除浮动 解决方案 及 原理分析 方案1 直接设置父元素的高度 优势：极其简单 弊端：必须要知道父元素高度是多少...overflow:hidden, 语义应该是溢出:隐藏，按道理说，子元素浮动了，但依然是在父元素里的，而父元素高度塌陷，高度为0了，子元素应该算是溢出了，为什么没有隐藏，反而撑开了父元素的高度？...属于同一个BFC的两个相邻Box的margin会发生重叠 注意：发生重叠后，外边距的高度等于两个发生重叠的外边距的高度中的较大者 从上面的例子可以看出，虽然红色 和 蓝色 的 div 都有设置
块级元素（Block-level Elements） 块级元素是指那些会在新的一行开始显示的元素。这些元素通常会占据父容器的整个宽度，直到遇到下一个块级元素或容器的边缘。...class="block">这是第一个块级元素div> div class="block">这是第二个块级元素div> div class="block">这是第三个块级元素...它们每个都在新的一行上显示，具有相同的背景色、边距和内边距。每个 div 元素都占据了父容器的整个宽度，除非有其他元素阻止其占据更多空间。...宽度和高度： 块级元素的宽度可以被调整，通常是通过 width 属性设置。默认情况下，高度会根据内容的大小自适应。 行内元素的排列 从左到右排列： 行内元素会从左到右排列，并在同一行中显示。...它们的宽度和高度通常由内容决定。 行内换行： 当行内元素的总宽度超出父容器的宽度时，会自动换行。 三、实际应用中的常规流布局 在实际应用中，常规流布局经常用于创建简单的页面布局，如文章段落、列表等。
浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。如下第一个例子box2是浮动框，其后跟一个块元素；例子2是浮动框后跟一个内联元素。...这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。...但是为了计算方便：一般都会增加一个空div块，并使用clear：both来设定表示两侧都不允许有浮动元素。这样新的空div块会下移，达到撑开父元素的目的。...重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。...这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left
，比如块级元素默认就会占据文档一行，高度会根据内容填充，行内元素可以相互挨着，不会占据多余的空间等规则，BFC很明显你可以浅显的将他理解为将一块元素封闭起来，与别的元素进行隔开，自己内部的属性不干扰外部的元素的属性...包含内部浮动元素 说现象 因为css的默认规则，当父元素没有进行设置高度的时候，他的高度取决于内部元素的高度，当内部元素设置浮动了之后，父元素就没有了高度，这个过程叫做不包含内部浮动元素，这是css...BFC之后现象 排除外部浮动 说现象 当父元素内部有两个元素，其中一个设置了浮动，那么旁边的元素进行文字书写的时候，会自动环绕到该子元素，因为css规则定义就是浮动是不占据空间位置的，所以会直接出现类似报纸文章样式的现象...div> 看现象 可以看到，我们明明设置了距离上面100 和距离下面100 但是最后距离只有100 这个现象就做margin重叠 给其中一个子元素添加BFC进行解决...marginTop100px，但是其实内部的相对位置是没有发生改变的，当然这时候你可以使用padding进行解决，但是不建议，因为这样会有副作用，比如影响当前行的所有元素的高度 给外部元素添加BFC
box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...优点：可以快速适用移动端布局，字体，图片高度 缺点： ①目前 ie 不支持，对 pc 页面来讲使用次数不多； ②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配； ③在响应式布局中...另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的...；还有一个就是inline-block在使用时有时会有空白间隙的问题 缺点 最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。...class="parent"> //添加额外标签并且添加clear属性 div style="clear:both">div> //也可以加一个br标签 div> 父级添加
外边距的溢出, 特殊场合下，为子元素设置外边距(上下)会作用到父元素上 特殊场合： a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距 解决方案： a....浮动元素依然位于父元素之内 ⑤. 解决问题-多个块级元素在一行内的显示问题 (3). 浮动引发的特殊效果 ①. 当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住) ②....浮动元素为父元素高度带来的影响，父元素的高度是以未浮动的子元素高度为准，如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0，解决父元素的高度问题方案： (1)....#tbl td:first-child 获取 id 为 tbl 表格中每个 tr 中的第一个 td B. :last-child 获取属于其父元素中的最后一个子元素 C....在父元素的第一个或最后一个子元素位置处，增加一个空 table 用内容生成解决外边距的代码如下: 选择器:before{ content:""； display:table
1、浮动 1、浮动引发的特殊效果 1、元素一旦浮动起来之后，都将变为块级元素 2、元素一旦浮动起来之后，宽度在不设定的情况下，将以内容为准 3、当父元素中显示不下所有的已浮动子元素的话...，那么最后一个将换行，依次类推。...父元素的高度是以未浮动的子元素为准的 1、直接设置父元素的高度 弊端：必须要知道父元素的高度是多少 2、设置父元素也跟着浮动...，也一同被隐藏了 4、在父元素的最后位置处，增加一个空子元素，并设置其 clear:both 即可 5、... ... 2、显示 1、显示方式 1...注意：opacity 和 rgba()的区别 opacity : 让整个元素的所有内容全部都透明 rgba()
浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...清除浮动的方式： 父级div定义height 最后一个浮动元素后加空div标签 并添加样式clear:both。 包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom 7.CSS3新增伪类有那些？...Box-sizing CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度。...class="box"> 盒子模型 div> 这时候，就可以发现盒子的所占据的宽度为200px。
无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个...浮动带来的问题：父元素的高度无法被撑开，影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...清除浮动的方式：父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。...父级div定义zoom设置元素浮动后，该元素的display值是多少？自动变成display:blockmargin和padding分别适合什么场景使用？...区域会自动分配水平空间有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度外层div使用position：relative；高度要求自适应的div使用position
优先级就近原则，同权重情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级为: !...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。...:after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n :...absolute; top:50%; /*父元素高度50%*/ margin-top: -150px; /*自身高度一半*/ } 未知高度的块级父子元素居中，模拟表格布局 缺点：IE67不兼容...一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 方案1： .sub { height: calc(100%-100px); } 方案2： .container
今天遇到一个问题，给div设置高度 height: 100%;却没有生效，在f12审查元素的时候可以看到高度字占据了半屏，并没有占据100%全屏，也就是说，div高度设置100%无效。 ?...记录一下解决办法: 找到div的父级元素，并且给父级元素手动设置一个高度，这个问题就解决了。...错误原因，根本在于没有浏览器是计算元素高度和宽度的原理： Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容的高度， 当一个元素的高度设定为百分比高度时， 无法根据获取父元素的高度，也就无法计算自己的高度。...原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。...一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明...清除浮动 父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 ? 给内部两个盒子加上float属性的时候 ?...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 元素的宽度和高度： 重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。...为一个定值，子层设置width为100%（以父包含块宽度为准自适应）。...这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。...可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）
(1) 总是在新行上开始，占据一整行; (2) 高度，行高以及外边距和内边距都可控制; (3) 宽度始终是与浏览器宽度一样，与内容无关; (4) 它可以容纳内联元素和其他块元素。 ...父元素的这个属性对它下面的子元素也起作用，比如一个div设置了text-align居中，则它内部的文字可以居中，它的子div内部的文字也可以居中。...但是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面所有的文字，都会相对于最靠近自己的一层div来实现居中。所以，这个属性不能用于div在父div中的整体居中。...5 块级元素中的文字图片垂直居中(针对块的高度确定的，这个是从另一个博客上看到的，真的很实用哦，如果块内只有这些文字的话) 文字在层(块级元素)中垂直居中vertical-align 属性是做不到的...div style="line-height:500px;height:500;">div> 6 块级元素中的文字图片垂直居中(块的高度不确定的) 在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度
只发生在垂直方向（margin-top/margin-bottom） margin重叠三种情况： 相邻的兄弟元素 父级和第一个/最后一个子元素 空的block元素（自己和自己重叠） demo 1: 1...> 兄弟元素的上下margin发生了重叠 2.父级和第一个/最后一个子元素 demo 1: <!...demo 2: 为父元素和第一个子元素之间添加一个 （空格或文字、图片等内联元素）inline元素 <!...例2： image.png 我们设置左右定位值left：0; right：0;，它的宽度同样自动填充填满了它所在的容器，只不过它的容器是它的第一个父级相对定位元素。...image.png 上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？
清除浮动的方式 父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...结尾处加空 div 标签 clear: both，原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。...父级 div 定义 display: table 。 父级 div 定义 伪类 :after 和 zoom 。...定位原点 relative 是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute 相对于第一个 position 属性值不为 static 的父类。...无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断： 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
