目录
2、BFC（Block formatting context 块格式化上下文）
3、实现块级元素的同行显示（文本环绕效果）---- float：left
4、实现块级元素的同行显示（布局规则）---- left（从左往右），right（从右往左）
5、父子、兄弟浮动陷阱：父盒未固定高度，存在显示覆盖问题（在不做清浮动情况下，父级不会获取子级的高度）
一、文档流（normal flow）
1、概念
本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
注意：本质不存在文档流概念，当一个错误的概念被绝大数人认为是对的，那么它就是对的
2、BFC（Block formatting context 块格式化上下文）
块级格式化上下文：一个独立的渲染区域，只有Block-level box（块级盒）参与，它规定了内部的Block-level Box（块级盒）如何布局，并且与这个区域外部毫不相干。
- 2.1一切皆为框
- div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
- 与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
- 可以使用 display属性改变生成的框的类型，可以应用于所有标签。
即，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。
还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。- 2.2 无名块框
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。
类似于把一些文本添加到一个块级元素（例div）的开头，会创建块级元素。如下，即使没有把这些文本定义为段落，它也会被当作段落对待：<div> <!--无名块框 some text --> some text <p>Some more text.</p> </div>在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
3、BFC规则
① 内部的Box会在垂直方向，一个接一个地放置； ② Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠； ③ Box自身水平方向的位置由margin左或右决定(具体依据参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档流</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; /*默认BFC水平布局方向:从左至右*/ /*margin-left: 50px;*/ /*更改BFC水平布局方向:从右至左*/ /*更改块为右浮动，即从右往左计算距离， 若向右移动则 margin-right: -50px;*/ float: right; margin-right: -50px; } .b1 { width: 200px; height: 200px; background: red; margin-left: 10px; } .bb1, .bb2 { width: 50px; height: 50px; background: cyan; float: left; } .bb1 { margin-left: 20px; margin-right: 20px; } .bb2 { margin-left: 20px; } </style> </head> <body> <!-- b1与b2与box 同在一个区域 | bb1与bb2 同在一个区域 --> <div class="b1"> <div class="bb1"></div> <div class="bb2"></div> </div> <div class="b2"></div> /*box用来实现BFC的水平布局方式*/ <div class="box"></div> </body> </html>
二、浮动布局
1、浮动布局概念
如下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
下图中，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
2、基本语法
float: left | right
3、实现块级元素的同行显示（文本环绕效果）---- float：left
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局</title> <style type="text/css"> .article { width: 300px; border: 1px solid black; } /*类eg 后代的img 设置宽度，设置块级，靠左浮动*/ .eg img { width: 148px; /*块级:独占一行*/ display: block; /*浮动后:可以同行显示(只占自身显示区域)*/ float: left; } </style> </head> <body> <!-- 解决的问题:让block box同行显示 --> <!-- eg:文本环绕 --> <div class="eg"> <div class="article"><img src="w3c/img/icon2.png" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div> </div> </body> </html>
4、实现块级元素的同行显示（布局规则）---- left（从左往右），right（从右往左）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局</title> <style type="text/css"> /*设置父盒，背景橘色*/ .sup { width: 300px; height: 300px; background-color: orange; } /*设置子盒样式，红色*/ .sub { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px 'STSong'; text-align: center; } /*BFC横向布局规则为从左至右,且block box同行显示(之间没有间隔)*/ /*注: 从左至右可以理解横坐标正方向为右*/ .sub { float: left; } /*BFC横向布局规则为从右至左,且block box同行显示(之间没有间隔)*/ /*注: 从右至左可以理解横坐标正方向为左*/ .sub { /*float: right;*/ } </style> </head> <body> <!-- 基本语法:float: left | right --> <div class="p2"> <div class="sup"> <div class="sub">1</div> <div class="sub">2</div> </div> </div> </body> </html>
5、父子、兄弟浮动陷阱：父盒未固定高度，存在显示覆盖问题（在不做清浮动情况下，父级不会获取子级的高度）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动布局</title> <style type="text/css"> /*父盒，背景橘色*/ .sp { width: 300px; background-color: orange; } /*子盒设置，红色*/ .sb { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px 'STSong'; text-align: center; /*设置子盒1、2 浮动布局规则，从右往左*/ float: left; } .sb:nth-child(2) { /*改变图像原生位置，文本和图像改变*/ /*文本层次高于背景层次*/ /*margin-top: -80px;*/ /*2的背景只能遮挡1的背景,但不能遮挡1的文本*/ /*background-color: pink;*/ /*父级的高度最终决定于逻辑最后位置上的子级的盒子底端*/ } /*当不设定父盒高，则导致显示区域重叠，文本显示正常*/ /*设置文本宽高，黄绿色*/ .br { width: 300px; /*height: 100px;*/ background-color: yellowgreen; } /*设置父级刚好拥有存放所有子级的高度(合适高度)，则显示正常*/ .sp { height: 100px; } /*总结(坑):当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常*/ </style> </head> <body> <!--浮动产生的问题: 父级未设置固定高度,不再撑开父级高度 --> <div class="sp"> <div class="sb">1</div> <div class="sb">2</div> </div> <div class="br">1234512345123451234512345</div> </body> </html>未设置父盒高度：
，兄弟相容覆盖
设置父盒高度，保证父级拥有存放子级的高度：
，兄弟正常显示
6、清浮动（常见四种方法）
目的：对父级所在容器中的Block-level Box布局不产生影响
原理（本质）：在浮动布局情况下，让父级获得合适的高度
① 浮动的父级设置高度 super { height: npx; } ② 浮动的父级设置overflow super { overflow: hidden; } ③ 浮动的父级兄弟设置clear brother { clear: left | right | both; } ④ 浮动的父级伪类清浮动（最推荐） super:after { content: ""; display: block; clear: left | right | both; }注意：
- 未脱离文档流：子标签在父标签未设置高度的情况下，会撑开父标签高度
- 脱离文档流：不对父级的高度进行改动
- 不完全脱离文档流（浮动后）：不清浮动，不撑开父高度；清浮动后，撑开父高度
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清浮动</title> <style type="text/css"> /*父盒,橘色*/ .sup { width: 300px; background-color: orange; } /*子盒，红色*/ .sub { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px 'STSong'; text-align: center; } /*兄弟盒，粉色*/ .br { width: 200px; height: 200px; background-color: pink; } /*子盒设置左浮动*/ .sub { float: left; } /*清浮动的对象:用于浮动子级的父级 sup*/ /*① 设置自身高度*/ .sup { /*height: 100px;*/ } /*② 设置自身overflow: hidden*/ .sup { /*overflow: hidden;*/ } /*③ 设置兄弟标签的clear: left | right | both*/ .s2 { /*设置s2的高度和浮动方式*/ /*float: right;*/ /*height: 50px;*/ } .br { /*若清除了右浮动，则兄弟接在被清除的s2高度后*/ /*clear: right;*/ /*若清除了左浮动，则兄弟接在被清除的s1高度后*/ /*clear:left;*/ /*清楚了左右，则接在大的后面*/ /*clear: both;*/ } .br{ /*display: block;*/ /*clear: both;*/ } /*④ 设置自身:after伪类*/ /*设置父级后方伪类，相当于设定一个父类后的兄弟块进行清除操作*/ .sup:after { content: ""; display: block; clear: both; } </style> </head> <body> <div class="sup"> <div class="sub s1">1</div> <div class="sub s2">2</div> </div> <div class="br"></div> </body> </html>
----->>清浮动后---->>
三、流式布局（大小跟随变化而变化）
1、案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>流式布局</title> <style type="text/css"> html, body { width: 100%; margin: 0; } .box { /*百分比流式*/ /*参考最近父级*/ width: 90%; /*max-width: 1000px;*/ /*min-width: 600px;*/ /*窗口比*/ /*width: 90vw;*/ /*max-width: 1000px;*/ /*min-width: 600px;*/ height: 300px; background-color: orange; margin: 0 auto; } .b { width: 100px; height: 100px; background-color: red; border-radius: 50%; float: left; } body { font-size: 30px; } /*.sup { font-size: 20px; }*/ .txt { /*1em = 16px*/ /*font-size: 16px;*/ /*font-size: 0.4em;*/ /*总结:em为最近设置字体大小的父级规定的字体大小*/ font-size: 1rem; /*总结:rem为html字体大小*/ } html { font-size: 50px; } </style> </head> <body> <!-- 流式布局: --> <!-- 目的:让布局脱离固定值限制,可以根据页面情况改变相应发生改变 --> <div class="box"> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> </div> <div class="sup"> <div class="txt">文本</div> </div> </body> </html>2、流式布局相关操作
① 百分比设置(基于父级的长宽) % ② 窗口比设置（基于窗口的长宽） vw | vh ③ 字体控制 em | rem
四、定位布局（position）
1、position属性
- static（静态，默认值）
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。- relative（相对）
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。- absolute（绝对）
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。- fixed（固定）
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
注意：若发生定位冲突，则左右取左，上下取上
2、定位的语法
position: static | relative | absolute | fixed;
布局方位：left | right | top | bottom
属性 描述 position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow 设置当元素的内容溢出其区域时发生的事情。 clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 vertical-align 设置元素的垂直对齐方式。 z-index 设置元素的堆叠顺序。 3、相对定位（relative）
- ① 未脱离文档流：元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- ② 以自身原有位置作为参考坐标系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>相对定位</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: red; } .b2 { background-color: orange; } /*不做定位操作*/ /*b1,b2均在文档流中,b1的布局会影响到b2*/ /*.b1 { margin-top: 30px; margin-bottom: 30px; }*/ /*固定定位后*/ .b1 { /*开启定位*/ position: relative; /*1.未脱离文档流*/ /*BFC规则下margin布局,上盒子依旧会影响下盒子*/ /*改变盒子的原有位置*/ /*margin-top: 30px; margin-bottom: 30px;*/ /*2.方位布局下,上盒子不会影响下盒子*/ /*3.参考自身原有位置进行移动*/ /*4.left=-right、top=-bottom,同时存在,左右取左,上下取上*/ left: 30px; top: 30px; /*right: 30px；*/ bottom: 30px; /*总结: 1、方位布局只改变盒子显示区域,不改变盒子原有位置 2、方位布局就是、显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/ } </style> </head> <body> <div class="b1"></div> <div class="b2"></div> </body> </html>4、绝对定位（absolute）
- ① 脱离文档流：元素框从文档流完全删除，并相对于其包含块定位。
- ② 以最近定位父级作为参考坐标系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: red; } .b2 { background-color: orange; } .b1 { /*1.完全脱离文档流*/ position: absolute; /*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/ /*打开定位方位*/ margin-left: 100px; margin-top: 100px; /*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/ /*2.参考系:最近的父级*/ left: 100px; /*right: 300px;*/ /*top: 90px；*/ /*bottom:100px;*/ /*3.同时存在,左右取左,上下取上*/ } </style> </head> <body> <div class="b1"></div> <div class="b2"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: orange; } .sub { width: 200px; height: 200px; background-color: red; } .sup { /*采用了盒模型布局*/ margin: 0 auto; /*需求:sub(子)应该参考sup（父）,sup（父）需要定位:相对|绝对|固定*/ /*相对定位好处:父级不会脱离文档流,满足所有的盒模型布局*/ /*position: relative;*/ /*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/ position: absolute; margin: 100px 100px; /*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/ /*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/ } .sub { /*2.参考坐标系为最近的定位父级*/ position: absolute; left: 100; right: 0; top: 0; /*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/ /*3.同时存在,左右取左,上下取上*/ } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> </html>
5、固定定位（fixed） --小广告
- ① 脱离文档流
- ② 以文档窗口作为参考坐标系
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: orange; margin: 0 auto; } .sub { width: 200px; height: 200px; background-color: red; } .sup { position: relative; position: absolute; } .sub { position: fixed; left: 0; /*top: 0;*/ bottom: 0; } </style> </head> <body> <!-- 固定定位 --> <!-- 1.完全脱离文档流 --> <!-- 2.参考系为文档窗口 --> <!-- 3.左右取左,上下取上 --> <div class="sup"> <div class="sub"></div> </div> br*100+tab </body> </html>
6、z-index：设置浮动显示等级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> .box { /*辅助子级进行绝对定位*/ position: relative; width: 400px; height: 400px; background-color: red; margin: 0 auto; color: white; text-align: center; font: 900 30px/200px 'STSong'; font-size: 60px; } .d1, .d2, .d3 { width: 200px; height: 200px; position: absolute; } .d1 { background-color: orange; } .d2 { background-color: blue; top: calc(50% - 100px); left: calc(50% - 100px); } .d3 { background-color: black; right: 0; bottom: 0; } /*脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数*/ .d2 { z-index: 10 } .d3 { z-index: 20 } </style> </head> <body> <!-- 需求1:d1,d2,d3均为box的一半大小 --> <!-- 需求2:d1左上角,d2居中,d3右下角 --> <!-- 需求3:d2区域在最上方(会覆盖d1,d3的重叠部分) --> <div class="box"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </div> </body> </html>
