当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。...如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”： ?...一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素： 1.若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行...顶部深蓝色盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 总结一下： 1.当父元素不给高度的时候， 2.内部元素不浮动时会撑开 3.而浮动的时候，父元素变成一条线 4
总结浮动常见的规则内容 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 如果元素是向左（右）...元素浮动后，其顶部将与所在行的顶部对齐 四....clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面; clear的常用取值 left:要求元素的顶部低于之前生成的所有左浮动元素的底部 right:要求元素的顶部低于之前生成的所有右浮动元素的底部...比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。...2.3. flex container中的属性 flex-direction flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
浮动和文字环绕 浮动框就是一个框在当前行被向左或向右挪动(偏移)，它不在常规流中，浮动框由浮动元素的框组成。...如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。...如果被缩短的行框无法再容纳更多的内容，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。当前行里浮动框前的任何内容，都将被重新排列到该浮动另一侧的第一个可用行里。...这也体现了浮动和绝对定位之间的一种平衡。 值的含义 该属性指定框应当向左右移动或者不移动。特性值有如下含义： left 该元素产生一个向左浮动的块框。...内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受’clear’属性的影响）。 right 与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行...； 浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。...使元素在一行内显示,使用浮动 */ float: left; /* 浮动的元素的display属性是block */ }...# 浮动的元素排列位置 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。...如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。 # 清除浮动本质 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
在浮动模型中，一个盒子首先根据常规流布局，然后从标准流中脱离并尽可能地向左或向右位移。内容可以漂浮在浮动周围。 绝对定位 Absolutr Positioning 。...在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。...比如说，如果想使盒固定在屏幕视口顶部，但不出现在打印页的顶部，这两种设定可以通过使用@media规则来分开，如下： @media screen { h1#first { position: fixed...BFC就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。 BFC拥有如下特性： 内部的Box会在垂直方向，从顶部往下一个接一个地放置。...BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 计算BFC的高度时，浮动元素也参与计算。 如何生成BFC： 根元素，即HTML元素。
浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。...对父容器的影响：不与父容器发生外边距合并。无法撑开父元素。 对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。...父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。...清除浮动的方法： 设置操作元素属性clear: both或者clear: left或者clear: right； 使父容器形成BFC。父容器成为BFC后，父容器将不会出现高度塌陷的问题。...BFC的特性： 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
一，浮动的定义 一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐。...由于容器宽度不够，box3放不下，就只能向下移动最左边 ?...box2的高，box3在向下向左移动的时候，遇到了box1的外边沿，就停止移动了。...当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。 ? 写一下我理解的行盒的概念。...（2）父容器高度计算出现问题 父元素看不到浮动元素，如果父元素没有设置高度，浮动元素是无法撑开父容器的。
子元素2 div> div>a{ color:red } 相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择 h1元素...值 描述 left 元素向左浮动 right 元素向右浮动 浮动的原理： 浮动以后使元素脱离了文档流 浮动只有左右浮动，没有上下浮动 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。...此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象 当所有元素同时浮动的时候，会变成水平摆放，向左或者向右 当容器不足以横向摆放内容时候，会在下一行摆放 清除浮动...浮动副作用： 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动 浮动元素会造成父元素高度塌陷 后续元素会受到影响 div class="box">div> div class=...100% 0% 是动画的开始，100% 是动画的完成。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。 如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。...浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。 浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。 <!...更多请参考 绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄弟元素的布局。...常见应用场景 使父元素包含浮动元素 下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html div class="outer"> div class="float">I am a floated...rgba(233,78,119,.4); color: #fff; float: left; width: 200px; margin: 0 20px 0 0; } 通过给左侧文字设置向左浮动实现文字环绕效果是很常见的做法...div上的边距之间没有内容，因此两者将会合并，因此段落最终与框的顶部和底部齐平。...设置浮动的情况下，我可以通过使右边div成为BFC，使两个兄弟div互相隔离、互不影响，从而达到去除文字环绕的效果。
"> div class="sticky"> SOME CONTENT div> div> 当我在包裹元素内添加更多元素时，它开始正常工作了。...这就是前面例子中，粘性元素一开始就没有粘住的原因：粘性元素是粘性容器中唯一的子元素。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。...Absolute 定位 - 在粘附区域的末尾，元素停止并堆叠在另一个元素的顶部，就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部？...这意味着可以定义页脚具有粘性位置，并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时，元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。
关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动 参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...-- 顶部导航栏 开始 --> div class="nav"> 玉米商城 顶部导航栏 开始 --> div class="nav"> 玉米商城 <a
.#### display： inline属性使元素内联展示，内联元素设置宽度无效，相邻的inline元素会在一行显示，不能设置宽高。但是给行内元素设置浮动之后，可以设置宽和高。....# float浮动：是针对块级元素的浮动 浮动：浮动使元素脱离正常的文档流，是元素移动到所处容器的边界，或者移动到触碰另一个浮动的元素。...### float：浮动设计的初衷，是为了实现文本环绕效果。 **left** ：元素会产生一个块级盒子向左浮动，正常的文档流会从这个盒子的右边和顶部开始。...，即旁边的文字会紧靠着元素的右边或顶部。 **right** ：跟 `left` 属性值类似，只是元素产生的块级盒子向右浮动，正常的文档流会从这个盒子的左边和顶部开始。...**none** ：这个盒子不浮动，会显示其在文本中出现的位置 设置元素的浮动为左或者右浮动，当设置元素浮动时，相邻元素会根据自身大小，排满一行，如果父容器宽度不够则会换行。
浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。...浮动元素的特性包括：浮动元素会脱离标准流(脱标)。浮动的元素会一行内显示并且元素顶部对齐。浮动的元素会具有行内块元素的特性。...高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。...overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。...="childl">div> div class="childr">div>div>总结flex布局用的顺手了，会记不起用其它。
宽度*/ width: 100px; /*背景颜色*/ background-color: red; /*向左浮动.../ width: 100px; /*背景颜色*/ background-color: green; /*向左浮动...(没有则参考body标签)，参考小米官网导航条内购物车 fixed（固定定位）：相对浏览器窗口做定位，固定不动，参考小米官网右边回到顶部 static定位 页面上的每个盒子从上到下、从左到右依次排列的布局...: 25px; } ---- fixed定位 相对于浏览器窗口进行定位，元素脱离文档流 常用于顶部导航栏、顶部搜索框、侧边联系客服等板块 下面上一个综合案例 overflow溢出属性 值 描述...将box1、box2增加以z-index属性，可将box1、box2层级改变，使box1在box2的上方 .box1 { z-index: 1; } .box2 { z-index: 0; } 透明度的设置
浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...取值方式： left：向左浮动 right：向右浮动 none：默认值，不浮动 详情参考： clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...absolute（绝对定位） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...class="d1">111div> div class="scrollTop">返回顶部div> 返回顶部按钮样式示例 顶部导航菜单示例 顶部导航栏 开始 --> div class="nav"> 玉米商城 <a
内容沿着左浮动框的右侧向下流动，并沿右浮动框的左侧向下流动。下面我们来看一下 浮动定位 和 内容流。 2.浮动对布局的影响 浮动盒将向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动的外边缘。... img 盒向左浮动。其后的内容被格式化到浮动的右侧，从浮动所在的同一行开始布局。... 这是因为浮动左侧的内容为浮动所替代，并被向下重排到了浮动的右侧。 正如8.3.1节 所述，浮动元素的margins绝对不会与相邻盒的margins折叠。...该属性值具有如下含义： left 该元素生成一个浮动到左侧的块盒。内容在盒的右侧从顶部向下流动（受clear属性限制） right 该元素生成一个浮动到右侧的块盒。...内容在盒的左侧从顶部向下流动（受clear属性限制） none 该盒不浮动 用户代理会视根元素上的 float 为 none 。
可以知道sticky属性有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...亦即如果你设置了top:50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。...float浮动布局 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。...">我是一个左浮动的元素div> div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 也没有触发 BFC 元素
五、浮动（Float） 浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。... div> 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。 需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。....clearfix类可以确保父容器包裹住浮动的子元素。...相对定位（Relative） 相对定位使元素相对于其正常位置进行移动。它不会影响文档流中其他元素的布局。...div style="position: sticky; top: 0; background-color: yellow;"> 这是一个粘性定位的元素 div> 当页面滚动时，元素会在到达顶部时固定在顶部
div{ float:left;/*规定元素向左浮动*/ /*float:right;规定元素向右浮动*/ } 请注意，浮动float属性没有center取值，并且，如果设置了浮动属性，那么你将不能通过使用...浮动 当某个元素浮动之后，相当于从标准流中删除了该元素，标准流中的元素将会无视浮动元素，并且可能被浮动元素覆盖。...brother2的右边*/ b) 不同方向的浮动元素，会尽量去寻找并贴靠前面和它浮动方向相同的元素。...clear属性的功能是使浮动元素不去寻找相邻的其他浮动元素，从而消除浮动元素对其他元素的影响（解决问题二）。...flex-start，默认值，开始对齐（例如上面设置了横向从左至右排列项目，则这里表示左对齐，如果上面设置row-reverse，则这里表示右对齐），该属性还有几个可选值：flex-end，结束对齐；center
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
