【前端布局篇】浮动、定位、弹性布局，固比固、双飞翼、圣杯布局

一、布局方式介绍

布局模型是基于盒模型基础上进行的拓展，关于布局有流式布局（标准的布局），浮动布局、定位布局、flex布局等。

HTML5+CSS3系列课程
携程网首页-移动端
响应式布局实战之微加建站
校园官网考试实战项目

1.1 标准流（流动模型）

描述：元素按照自己默认的元素类型在页面中进行排列的方式叫做标准流布局。

1.2 按照元素的框类型分类

• 块块元素block

  前后具有换行符，默认独占一行。

  可以设置宽高，设置宽高后容器范围为设置的宽高的范围，但换行符一直存在。

  设置上下外边距存在合并问题。

  非块状元素设置为块状元素 display:block;

  目前学过的块状元素 h1-h6 p div 等

• 行内元素inline

  在同一行内与其它行内级元素从左到右依次排列。默认包裹内容。

  行内元素不能设置宽高。

  设置左右外边距生效，上下外边距不生效；

  设置左右内填充生效，上下内填充不生效（不占位，不会撑大盒子，但是背景色又呈现）;

  非行内元素设置为行内元素 display:inline;

  目前学过的行内元素 span a strong em ins del 等

• 行内块元素 inline-block

  在同一行内与其它行内级元素从左到右依次排列。默认包裹内容。

  可以设置宽高，设置宽高后容器范围为设置的宽高的范围。

  所有的外边距和内填充都是生效的。

  非行内块元素设置为行内块元素 display:inline-block;

  常见的行内块元素 input textarea select img等

总结：标准流中，块级元素block在页面中从上往下依次排列，行内级元素（inline、inline-block）在同一行内从左到右依次排列，超出父容器后自动换行。如果文本内容没有使用元素进行包裹，那么被识别为匿名行内元素。

二、浮动布局

2.1 浮动的概念

• 浮动模型：用来改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将本来占据一行的元素，可以并列排在一行里。

• 设置浮动属性， 可以向左侧或右侧，浮动的框就因此向左或向右移动，直到它的外边缘碰到包含框(浮动元素的包含块是其最近的块级祖先元素)或另一个浮动框的边框为止。

• 通过属性 float 设置元素的浮动，对应的属性值

  • left (左浮动 )
  • right ( 右浮动 )
  • none ( 默认，不浮动 )

• 浮动设计的初衷，仅仅是为了在排版中，实现文字环绕图片效果

  <div style="background-color: #f5f5f5;">
  	<img src="img/3.jpg">
  	<p> ....</p>
  </div>
  

  以上代码使用样式对img设置左浮动，p不设置浮动，适量增加p中的内容，缩放视口查看效果； 脱离了文档流（是相对于普通文档流来说的），该元素就不在占空间，因此在计算高度时这个元素就不考虑，上面本身div没有设置高度，它的高度由元素里的内容 与元素里的内容高度共同决定（把父元素撑开），当元素设置浮动后，它就脱离文档流，在标准流中，就只有元素一个，元素就自然排在上面去了，此时 父元素div的高度就是由元素里的内容的高度决定。（也就是经常说的，父元素会塌陷问题，道理就在这）脱离文档流只是在视觉上这个元素还是占据空间的，图片元素 不会覆盖其他元素内容（这里内容俩字很重要，也充分说明了在使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本内容依然会为这个元素让出位置， 环绕在周围），或不被其他元素内容覆盖，如以下操作：在以上代码基础上，div外新增一个p元素，添加文本内容，然后将div内部img和p元素设置左浮动，查看效果

2.2 浮动的特性

• 浮动模型改变了元素的默认排列方式，可以使元素紧密排列（按照设置浮动的方向依次贴边显示）
• 浮动后的元素都具有了块级元素的特点
• 设置浮动后的元素，不存在上下外边距合并的问题
• 浮动的元素脱离了标准的文档流，不在文档流中占位置，且会形成压盖效果，前面设置浮动的元素压盖后面标准流中的元素
• 子元素设置浮动，父元素在没有设置高度的情况下，会呈现塌陷的效果

2.3 清除浮动

• 为什么要清除浮动

  当父元素不设置高度或者设置的高度小于子元素；而子元素又设置了浮动，那么会造成父元素塌陷。如下，子元素全部设置浮动后，父元素塌陷效果：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SYUc4rBu-1687136272709)(浮动与定位.assets/clip_image002.jpg)]

• 清除浮动的属性 clear，属性值

  • left 清除左浮动
  • right 清除右浮动
  • both 清除左右浮动，常用

• 清除浮动的方式（至少需要讲以下四种）

  • 父元素设置合理的高度

    这种方式可以解决视觉上父元素塌陷问题，但元素还是浮动的效果；

    且在页面布局中，更多的容器其实是被内容撑起来的，在一开始布局的时候，父元素的高度其实是不太好确定的，所以除非是明确尺寸的布局，否则不建议使用这种方式

  • 父元素设置overflow:hidden|scroll |auto属性

    描述：通过给父元素设置overflow:hidden | scroll | auto

    问题：如果子元素及内容不超出父元素，用起来很方便。但是如果有定位存在需要将子元素定位到父元素外的某个位置，那么溢出的部分就看不到了。根据实际情况使用。

  • 利用空元素（内墙或外墙）

    描述：这种方式是在父元素内部的最后，添加一对空标签，然后给这个空标签设置清除浮动clear:both

    问题：当页面应用浮动过多的时候，会增加html空标签的数量，一方面影响加载速度，另一方面也不美观

  • after 伪类清浮动（推荐）

    这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原