复制代码 ---- 三、 正文 1、 浮动本来的意义 浮动的意义原本仅是用来让文字环绕在图片周围而已。...通过上图可以看到，设置图片左浮动可以将图片从正常文档流中抽取出来，后面的元素会忽略浮动元素原来的位置，所以可以看到以块元素显示的span标签插入到了图片下面，但是，我们发现文字却不会嵌入到图片下面，因为这就是浮动最纯粹的意义...--让文字环绕在图片周围（关于为什么文字不会插入浮动元素下面在网上也有一些讨论，大家可以去搜索一下，本文在此就不做更详细的解释了）。...PS: 如果想让文字也插入到浮动元素下面，可以通过设置绝对定位来实现。 // html代码 div class="origin1"> !...(1) 在最后一个浮动的 li 元素后边新增一个空的块状元素div，并设置clear:both以清除所有浮动。
、 正文 1、 浮动本来的意义 浮动的意义原本仅是用来让文字环绕在图片周围而已。...通过上图可以看到，设置图片左浮动可以将图片从正常文档流中抽取出来，后面的元素会忽略浮动元素原来的位置，所以可以看到以块元素显示的span标签插入到了图片下面，但是，我们发现文字却不会嵌入到图片下面，因为这就是浮动最纯粹的意义...--让文字环绕在图片周围（关于为什么文字不会插入浮动元素下面在网上也有一些讨论，大家可以去搜索一下，本文在此就不做更详细的解释了）。...PS: 如果想让文字也插入到浮动元素下面，可以通过设置绝对定位来实现。 // html代码 div class="origin1"> !...ul后面的新divdiv> 效果： ul后边的div元素确实可以在浮动元素下边排列，并且设置margin、padding等也是针对浮动元素的下边框。
也可以说，普通流中元素的位置由该元素在HTML文档中的位置决定。...，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果和印刷排版中的文本环绕相似。...绝对定位 在绝对定位布局中，元素会整体脱离普通流（浮动布局可以理解成脱离父元素文本流），因此绝对定位不会对其兄弟元素造成影响，而具体的位置由绝对定位的坐标决定。...触发BFC的条件 下面的方式会创建块格式上下文： 根元素或包含根元素的元素，这里我理解为body元素 浮动元素（元素的float不是none） 绝对定位元素（元素的position为absolute或fixed...元素的直接子元素） 多列容器（元素的column-count或column-width不为auto，包括column-count为1） column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
，无影响，仍占满一行 不做展示 3.3子元素绝对定位，固定定位，浮动，width:auto等同于width:0 将上面的style改成： .inner-auto{ position:absolute...（注意inner-auto本来是有颜色的） 此时该div的宽度已被挤压为0了，从控制台上看inner-auto: ? 所以，当我们在绝对定位，固定定位，浮动时候，要记得给元素设宽度。...2.浮动流的起始位置由最先设置浮动的元素未浮动时的位置决定 我们再回到上述的例子，div2,div3,div4向左浮动的时候 ? 浮动流的起始位置被最先设置浮动的元素原本的位置决定了。..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。...【实现思路】：正如上面所说，浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了，这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。
定位方案的三种流 普通流：包括对块级框的块格式，对行级框的行格式，对块级框和行级框的相对定位； 浮动：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，其它内容可以排在一个浮动的周围...； 绝对定位：在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置（包括 absolute, fixed ）。...BFC创建条件： 根元素或其它包含它的元素； 浮动（float不为 none)； 绝对定位元素（absolute或fixed)； 行内块 inline-blocks 表格单元格 display: table-cell...简单地说，就是浮动会脱离普通流（属于一种比较‘特殊’的脱离，其他内容还会围绕在浮动元素周围），并且创建了新的BFC，而父元素不具备产生 BFC 的条件，这时候父元素无法感知到它的存在，所以它的高度为0。...添加空元素来清除浮动 //增加了无意义的元素，不推荐 div class = "parent-container"> div class = "left-container">div>
浮动和定位 定位 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 通过使用 position 属性，选择不同类型的定位。...绝对定位:position: absolute; 绝对定位使元素的位置与文档流无关，因此不占据空间。...这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。...固定位置:position:fixed; 直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化 浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止...img{ float:right; } left -> 元素向左浮动 right ->元素向右浮动 none ->默认值。元素不浮动，并会显示在其在文本中出现的位置。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。 内容div> CSS Float（浮动） CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。...元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊： ? ?...fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： ? relative 定位 相对定位元素的定位是相对其正常位置 ?...absolute 定位 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: ?
浮动（Floats） 绝对定位（Absolute positioning） 言下之意就是网页布局和元素的定位都离不开这三种机制。...盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 元素的宽度和高度： 重要: 当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。...原理：（浏览器宽度-外包层宽度）／2 = 外边距 如果想让页面自动居中，当设置margin属性为auto的时候，不能再设置浮动或绝对定位属性 。... div> ? Paste_Image.png 9.CSS定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。...相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 absolute（绝对定位）和fixed（固定定位）都属于绝对定位形式 ?
（内联元素可不像块状元素这么霸道独占一行） 2、浮动模型 (Float) 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动 div{float:left;} div{float:right...;} 可以为不同的div设置不同的浮动方式来布局。...被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除； 我们可以通过z-index来设置它们的堆叠顺序 。...因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。 浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。...div定义了定位属性，子div就会跟着父div的位置去再定位 4.说一下z-index 4.1简单演示 利用z-index，可以改变元素相互覆盖的顺序。
只有绝对定位absolute和浮动float才会脱离文档流。 ---部分无视和完全无视的区别？...需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。...浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。如下第一个例子box2是浮动框，其后跟一个块元素；例子2是浮动框后跟一个内联元素。...（3）绝对定位 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位， 固定定位。 但是在IE6中浮动元素也存在于文档流中。 关于浮动会脱离文档流，这里我就不解释了。...因为我们一般会大力避免这种问题，而使用清除浮动的方法。上面引用的文字中，绝对定位 是指 position:absolute ，而 固定定位 是指 position:fixed。...也就是说，使用position:relative定位，其元素依旧在文档流中，他的位置可以使用 left、right、top、bottom、z-index等定位参数，但是，他的存在，还是会影响文档中紧跟在他周围的元素的...重要的事情说三遍，它的唯一并没有对周围的元素有任何的影响！！它依然存在于文档流中。它的位移是根据它在文档流中的原始位置发生的！！这一点非常非常重要。
紧接着，继续处理 div3 元素，因此之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行处理 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。...但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。...浮动清除 由于浮动最初设计是为了让文字可以围绕在图片周围，因此，浮动元素后面的非浮动元素会自动围绕着浮动元素进行包装。...而如果我们想让浮动元素之后的元素另起一行，从新的位置开始布局，那么就要进行浮动的清除。...应用场景： 微调 让后代元素可以使用绝对定位 通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。
且值不是 visible 的块元素， display: flow-root column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中...(这不是清除浮动，.clearfix 才是清除浮动） 例如如果儿子浮动了，那么爸爸包不住儿子，只有BFC才可以包住儿子。例如设置爸爸为float：left就包住了儿子。什么才算一个bfc？...还有一个作用，课可以归功于爸爸管儿子，如果一个div不是bfc，他其中的子元素的margin-top和margin-bottom会伸到父div外面。 例子： ? ?...举个例子： 两个div是是兄弟关系，把哥哥浮动了，那么哥哥会叠在弟弟上面，会遮盖弟弟。这时候如果把弟弟也变成BFC，那么哥哥和弟弟之间就会界限分明，谁都不会遮挡谁。 例子如下： ?...行内框、浮动框或绝对定位之间的外边距不会合并。值为大的边距。 既：两个块级元素一般情况下上下边距会合并，行内元素，浮动元素，绝对定位之后不会合并。
五、浮动（Float） 浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。...>这是一个浮动示例，图片将浮动到左侧，文本将围绕在图片周围。... div> 在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。 需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。...绝对定位（Absolute） 绝对定位的元素相对于最近的已定位祖先元素进行定位（如果没有，则相对于初始包含块）。绝对定位的元素脱离了文档流，不会影响其他元素的布局。...div> div> 内部的绝对定位元素相对于其父元素的右上角进行定位。
jLayout库允许您专注于绘制各个组件，而不是如何将其排列在屏幕上。 GitHub：https://github.com/bramstein/jlayout/ ?...图片发自简书App 5.jQSlickWrap http://www.jwf.us/projects/jQSlickWrap/ jQSlickWrap是一个真正可以将内容包裹在图片周围的jQuery插件...可以轻松而准确地实现浮动图像的文字环绕效果。 ?...因为Columns动态地创建了所有必要的HTML，所以唯一需要的HTML是一个空的HTML元素，比如一个div>标签，在初始化时使用相应的id。 ? 图片发自简书App
第二个元素 h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的...绝对定位 固定定位 浮动 float 属性定义元素在哪个方向浮动，任何元素都可以浮动。...浮动副作用： 当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动 浮动元素会造成父元素高度塌陷 后续元素会受到影响 div class="box">div> div class=...fixed 固定定位 其中，绝对定位和固定定位会脱离文档流 设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom 相对定位，改变位置的参照物是自己原来的位置，不脱标...绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 固定定位永远都会相对于浏览器窗口进行定位
什么情况下会创建BFC 根元素或包含根元素的元素 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display...column-count 或 column-width 不为 auto，包括 column-count 为 1） column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中...常见应用场景 使父元素包含浮动元素 下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html div class="outer"> div class="float">I am a floated...div> div> css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子，在左侧div...设置浮动的情况下，我可以通过使右边div成为BFC，使两个兄弟div互相隔离、互不影响，从而达到去除文字环绕的效果。
摘要 盒子模型 浮动 清除 溢出 定位 模态框 rgba 与 opacity透明区别 ---- 一、CCS盒子模型 margin：标签与标签之间的距离，主要用于控制标签周围间的间隔...浮动规律： 浮动框可以向左向右移动，知道它的外边缘碰到包含框或另一个浮动的边框为止。 浮动框不在文档流中，所以它已经脱离文档流，也就是说，浮动下面的文档流式无视浮动框的位置的。...五、定位（position） （通过某一相对位置或者绝对的位置将标签定在某一个位置） 相对定位：（relative） 相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。...绝对定位：（absolute） 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。...浮动(Floats) 左浮动元素尽量靠左、靠上，右浮动同理 这导致常规流环绕在它的周边，除非设置 clear 属性 浮动元素不会影响块级元素的布局 但浮动元素会影响行内元素的布局，让其围绕在自己周围，...绝对定位(Absolute positioning) 绝对定位方案，盒从常规流中被移除，不影响常规流的布局； 它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；...这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。...而如果在外面不包一个div的话，当设置display为inline-block、inline-flex、table-captain，和position为absolute、fixed，float为left
何时使用position HTML+CSS布局方式之中，最为常见的有两种布局模式，分别是浮动布局和定位布局。...在我们平时，使用最多的就是浮动布局，当在页面当中出现多个元素层叠状态时，我们则会考虑定位布局。...元素设置position:absolute时，针对哪个元素定位 设置属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。...假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。...fixed的定位方式 fixed可定位相对于浏览器窗口的指定坐标.这个元素的位置可通过left、right、top、bottom属性来规定。不论窗口滚动与否，元素都会留在那个位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
