先来了解一下block元素和inline元素在文档流中的排列方式。 block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。...block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。 ...2、要么清除浮动。清除浮动后的效果如下： ? 2-1：使用css clear清除浮动，在.container盒子闭合前加clear样式清除浮动。 ...例如：下图例3 box1向右侧浮动，box2不设置clear属性时的示意图；例4中box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行。 ?
也就是说，如果在遇到左浮动框之前，行内框被放置到行上，剩余的行框空间足够容纳该左浮动框，那么，左浮动框就会被放置在该行上，并与该行框的顶端对齐，然后，已经在行上的行内框被相应地移动到该浮动框的右侧（右侧成了该左浮动框的另一侧...TABLE 元素、块级替换元素、BFC元素和浮动元素 TABLE 元素、块级替换元素或者在常规流中创建了 block formatting contexts 的元素，它们的 border box 在同一个...内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受’clear’属性的影响）。 right 与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。...就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。 两个浮动元素的包含块宽度为200px，无法在一行放置，所以，右浮动元素只好折行显示了。 宽度设置成300px之后，则可以放到一行。 5. 浮动框的顶外边不能高于它包含块的顶部。
什么是浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。 如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。...一个元素设置了浮动（即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值）的常见缺陷是——影响它的兄弟元素的位置和父元素产生高度塌陷，下面对这两个问题展开说明...一个元素设置了浮动后，会影响它的兄弟元素，具体的影响方式较为复杂，这要视乎这些兄弟元素是块级元素还是内联元素： 1.若是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!
Colque)被认为是目前世界上最长寿的老人。...div> 浮动的语法： float:left/right /none 取值：left向左浮动，right向右浮动，none取消浮动 现在的浮动，用的最多是让块元素在同一行显示：就是给一行的所有块元素都加上浮动...，高度的起始位置，在上一个元素的下方 总结： 1.所有元素浮动后都变成了行内块 2.浮动元素不能覆盖文字 浮动引起的问题： /* 浮动的盒子撑不开父容器...div class="info">4div> div> div class="gebilaowang">div> image.png 3.清除浮动 就是清除浮动带来的影响，普通元素不受浮动元素影响...a) 给父元素设置高度（不推荐，因为在项目中很多盒子是不固定高度的） b 在父元素后设定空标签进行清除浮动 语法：clear:both image.png c) 设定父元素的overflow image.png
3.3 浮动案例 3.3.1 准备代码 3.3.2 案例 1：左对齐顺序排列 示例 1：要求在一行上，左对齐： 注意：因为从上到下执行代码，红色方块是第一个向左浮动的，自然在最左边 3.3.3 ...案例 2：右对齐顺序排列 示例 2：要求在一行上，右对齐： 注意：因为从上到下执行代码，红色方块是第一个向右浮动的，自然在最右边 3.3.4 案例 3：两端对齐排列 示例 3：要求在一行上，进行如下两端对齐...除此之外，在开发中，我们还有多种规范化的清除浮动的代码，下面让我们来一起学习。 4.3 概念&格式 清除浮动：清除兄弟元素带来的浮动影响。...，若对 内容不溢出 没有十足把握，不建议用此来清除浮动。...布局总结 网页布局中，行内元素 尤其是行内块元素，在布局上，无论垂直还是水平都容易操作。
接下来，我们来说一个非常非常重要的知识点，那就是浮动布局。那么，到底什么是浮动呢，还是以案例为主吧。我在B区域画三个div盒子，给他们都绑定同一个class，叫做box。 ?...1489391487793013193.png 可以看到，div元素是块级元素，再复习一下啊，块级元素有什么特点啊，是不是会独自占满一行呀？所以，这三个div元素就没法在同一行显示了。...那么，有没有什么办法，让多个块级元素在同一行显示呢？当然是有的，我们可以采用浮动布局，也就是说，让这些div元素“飘起来”，注意哦，飘起来以后，有两个方向，一个是向左漂浮，另一个则是向右漂浮。...没错，这个就叫做浮动布局。我现在问一下大家，你觉得，浮动布局的目的是什么？没错，就是为了让块级元素在同一行上显示，仅此而已。...如何清除浮动呢？有一个办法就是在浮动定位的最后一个元素后面，加上一个空元素，比如div元素，里面啥也不写，然后加上一个叫做clear:both的样式，那么，浮动就被清除了。 ?
清除浮动的方法 额外标签法,在最后一个浮动元素后面添加一个空的标签代码: div style="clear: both">div> 使用after伪元素进行清除浮动. .clearfix:after...效果 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动 清除浮动本质 ?...效果 选择器{clear:属性值;} clear 清除 属性值 描述 left 清除左侧浮动的影响 right 清除右侧浮动的影响 both 同时清除左右两侧浮动的影响 额外标签法 clear:...auto :超出自动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条 鼠标样式cursor cursor...white-space normal : 默认处理方式 nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
CSS实现定位的效果主要通过浮动( float )和定位( position)两个样式属性实现。 文档流 文档流是HTML页面中元素在排列时所占用位置的一-种规则。...理解好文档流的概念有助于学习CSS样式中的浮动和定位两块内容。 将HTML页面中的元素自，上向下分成一行一行，并在每行中按从左至右的挨次排放元素，即为文档流。...文档流是HTML页面的底层结构，HTML页面创建的元素默认都在文档流中。 注意:如果在一行中不能容纳所有的元素，则会换到下一-行，继续自左向右排列。...行内块级元素 行内块级元素设置为浮动后，元素之间的空白间隙被取消 浮动的特殊情况 父级与子级之间的浮动 为子级元素设置浮动不能超出父级元素的范围（与父级元素浮不浮动无关） 兄弟同时设置浮动 如果兄弟关系的两个元素...，为下一个兄弟元素设置为浮动，下一个兄弟元素不会超过上一个兄弟元素的位置 文本与浮动的元素 文本内容与浮动的元素之间，文本内容不会被浮动的元素所覆盖，而是环绕在浮动元素的周围 清除浮动 clear属性设置元素是否显示在其之前元素的下方
一般不写name属性，否则将“提交”两个字提交到服务器。 因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下标签使用也需要大家掌握。...层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。 1.2.3.3 CSS样式规则 使用HTML时，需要遵从一定的规范。...常见的块元素：、div>、等 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。...：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值） 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。...选择器{clear:属性值;} 常用属性值： left：不允许左侧有浮动元素（清除左侧浮动的影响） right：不允许右侧有浮动元素（清除右侧浮动的影响） both：同时清除左右两侧浮动的影响 例如：
css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。...block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 思考： 在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
面包屑导航和按钮一行两端显示面包屑或编辑栏超出宽度则自动另行显示图片实现采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。...浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。...高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。...当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。...="childl">div> div class="childr">div>div>总结flex布局用的顺手了，会记不起用其它。
左的顺序作用于四边； 浮动(float)属性 在 CSS 中，任何元素都可以浮动。...浮动元素会生成一个块级框，而不论它本身是何种元素。 关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...取值方式： left：向左浮动 right：向右浮动 none：默认值，不浮动 详情参考： clear clear属性规定元素的哪一侧不允许其他浮动元素。 值 描述 left 在左侧不允许浮动元素。...或者给.container加一个固定高度的子div： 固定高度解决方案(不推荐使用) 以上方案可以解决但是会使得页面操作不灵活 不推荐使用 解决方案二 清除浮动(推荐使用) clear语法：...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。
它的规则如下： 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行 div>独占一行div> 从左向右 这是在不使用 样式的请况之下正常排列方式...2 浮动布局 float属性，一般情况下元素默认是不浮动的，一旦添加该属性，元素就会向右或者向左浮动。看例子 经过对比可以发现，在不使用浮动之前，三个盒子都按照块元素的正常文档流排列方式，并且父元素的高也随着他们的内容大小变化。...上述例子中，虽然没有把父元素撑开，但是与它同级的兄弟元素并不会直接跑到它上面去，而是在它之下按照一下两个规则排列 2-2-1 若是浮动元素后紧跟 -> h1 ~ h6、p 这一类段落标签会自动换行...与其他正常文档流不产生效果 2-3 清除浮动 嗯？为什么还要清除浮动？直接不浮动就行了啊？
普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定...BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...（不设置浮动，设置浮动那肯定是 左右一行排列了）。...属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的） 3.每个元素的margin box的左边， 与包含块border...（不设置浮动，不设置左边距，块级子元素，一律靠左竖直向下排列，内联子元素一律从左向右排列，想想，正常写代码，都是这样，设置左浮动的靠近父元素的左边，设置右浮动，靠近父元素的右边。）
3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住 ...两个div都设置左浮动. b. ...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边 ...两个div都设置左浮动. b. ...第二个div用margin-left设置，让其在视觉上不被遮挡 3.2 当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边
然后它继续处理 div2 元素，因为之前处理的 div1 元素是浮动元素，不占用文档流，所以此时仍旧是在第一行左边绘制 div2 元素，发现它是一个块级元素，所以让其霸占一整行。...紧接着，继续处理 div3 元素，因此之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行处理 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。...继续往下处理，如果发现的还是浮动元素，因为所有的浮动元素都处理同一层面，所有的文档流元素都处于一个层面，所有浮动元素 div4 并不会跟 div3 发生重叠，而是贴着它。...而如果我们想让浮动元素之后的元素另起一行，从新的位置开始布局，那么就要进行浮动的清除。...但，如果元素还需要进行内边距，外边距的设置，边框的设置，因为这些大小都算在盒子的总宽度中，那么最终盒子的大小就变得很难确定，有可能导致某个浮动元素被挤到下一行去。
并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。...请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。 为什么会有浮动 因为当初设计 float 的目的是为了能实现文字能够环绕图片的排版功能。...浮动布局的生成 css 属性 float：left/right/none 左浮动/右浮动/不浮动（默认）。 浮动的影响 我们从一段代码来分析浮动都带来了哪些影响。...原因是浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。...空块元素结合clear属性 我们在父级元素的结束标签之前添加一个空的块级元素，然后添加 clear: both 属性，可以达到清除浮动的目的。
； 浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。...在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{ float:属性值; } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 right 元素向右浮动...总结: 浮动的目的就是为了让多个块级元素同一行上显示。 一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。...由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。 准确地说，并不是清除浮动，而是清除浮动后造成的影响。...在CSS中，clear属性用于清除浮动，其基本语法格式如下： 选择器{ clear:属性值; } 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素
所有盒子相关的属性都不能继承。 三、CSS选择器优先级 3.1 优先级概览 定义css样式时，经常出现两个或多个规则应用在同一元素上，这时就会出现优先级的问题。...（10）word-wrap ：允许长单词或URL地址换行到下一行 normal 只在允许的段字点换行（浏览器保持默认处理） break-word 在长单词或URL地址内部进行换行 五、盒子模型...标准流实际上就是一个网页内标签元素正常排列的顺序的意思，比如块级元素会独占一行，行内元素会按照顺序依次从左向右，从上向下排列；按照这种大前提的布局排列之下绝对不会出现列外的情况叫做标准流布局，也称为流式布局...3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动，这样才能一行对其显示。 4.浮动根据元素书写的位置来显示相应的浮动。...="box3">3div> div> 7.3 清除浮动 （1）为何要清除浮动 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响
css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。...block元素可以设置width、height、margin、padding属性； inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化...假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变...2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 ...整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
