CSS中的布局与元素的浮动

本文主要的内容是复习一下CSS中的布局知识点。

盒子模型的水平布局

<div class="box"> 
    <div class="son-box"></div>
  </div>

• 元素在其父元中的水平布局方向的位置是有以下几个属性来共同决定的：border-left , margin-left , padding-left , width , padding-right , margin-right , border-right

• 一个元素在其父元素中，水平布局必须满足下列等式：
  border-left + margin-left + padding-left + width + padding-right + margin-right + border-right = 父元素内容区的宽度
  若相加结果不成立，那么会自动调整某个元素以使上式强制成立，那么调整的规则如下：

  1. 如果上面属性值没有设置 auto 的情况，会自动调整 margin-right
  2. width/margin-left/margin-right这三个属性值都可以设置 auto ，如果这三个属性值有一个设置为 auto 的情况下，则会自动调整属性值为 auto 的属性，使得水平布局的等式成立，那么在这种情况下，有三种布局的形式。

  布局一： 如果将宽度和一个外边距的属性值设置为 auto ，则元素的宽度 width 最大，设置为 auto 的外边距会自动变为 0

* {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 300px;
      background-color: aqua;
    }
    
    .son-box {
      width: auto;
      height: 100px;
      margin-left: auto;
      background-color: aquamarine;
    }

布局二： 如果上面的三个属性值都是 auto ，则外边距都是 0 ,宽度最大

.son-box {
      width: auto;
      height: 100px;
      margin-left: auto;
      margin-right: auto;
      background-color: aquamarine;
    }

布局三： 若将两个外边距都设置为 auto ，宽度 width 设置为固定值，则会把两个外边距的属性值平均分配，从而达到水平居中的页面效果。

.son-box {
      width: 300px;
      height: 100px;
      margin: 0 auto;
      /* margin-left: auto;
      margin-right: auto; */
      background-color: aquamarine;
    }

盒子模型的垂直布局

• 子元素是在父元素的内容区中排列的，若子元素的大小超过了父元素的内容区，则子元素会从父元素中溢出
  

• 使用 overflow 属性来设置父元素如何处理溢出的子元素

.box {
      /* 默认值：在父元素位置的外部显示子元素 */
      /* overflow: visible; */

      /* 子元素溢出的部分被截取且不会显示 */
      /* overflow: hidden; */

      /* 生成两个方向的滚动条 */
      /* overflow: scroll; */

      /* 根据需要生成两个方向的滚动条 */
      overflow: auto;
      margin: 100px;
      width: 300px;
      height: 300px;
      background-color: rgb(53, 168, 168);
    }

浮动

浮动最开始的作用时用来实现文字环绕

• 浮动可以实现元素的水平排列，从而达到水平布局的效果，使用 float 属性来设置元素的浮动
• float: none 默认属性值 元素不浮动
• float: left 元素向左浮动
• float:right 元素向右浮动

元素设置浮动属性以后，水平布局的等式便不再需要强制成立

• 元素设置浮动之后，会完全从文档流中脱离，不在占用文档流的位置，所以元素下面还在文档流中的元素会自动向上移动

浮动元素的特点

• 浮动元素会脱离文档流 不在占用文档流中的位置
• 设置浮动之后，子元素会向父元素的左边/右边移动
• 浮动元素向左或向右移动时，不会超过它前面的其他浮动的元素
• 如果浮动元素上面是一个处于文档流中的元素，则该浮动元素无法上移
• 浮动元素不会超过他上边的浮动的兄弟元素，最多就是和它保持一样的高度
• 浮动会改变元素的性质
  • 块元素不再独占页面的一行 宽高都会被内容撑开
  • 行内元素的特点如上相同

浮动布局的注意点

1. 浮动和文档流中的盒子搭配
   先利用文档流的父元素排列上下位置，然后内部的子元素采取浮动的形式，来实现左右位置的排列

2. 一个元素浮动，理论上其他的兄弟元素也要设置浮动

3. 浮动的盒子只会影响浮动盒子之后的文档流，并不影响前面的文档流

4. 浮动元素只会压住它下面文档流的盒子，并不会压住下面文档流盒子的文字（图片）
   

   但是当父级盒子没有指定高度时，子元素又设置了浮动属性，则子元素会脱离文档流，无法撑起父元素的高度，从而导致父元素的高度丢失，接着父元素下面的元素也会自动上移，导致页面布局的混乱

清除浮动的影响

原因： 父元素在很多的情况下都不合适给确定的高度

• 产品网页————————> 会有产品的更新
• 新闻网页----------------------->报道内容文字不确定性

方法：

• 额外标签法 隔墙法
• 父元素添加 overflow 属性
• 父元素添加伪元素
• 父元素添加双伪元素

clear：
当不希望某个元素因为其他元素的浮动而发生了变化，可以通过设置 clear 来清除浮动元素对当前元素所产生的影响

• left 清除左侧浮动元素对当前元素的影响
• right 清除右侧浮动元素对当前元素的影响
• both 清除两侧中影响最大的那侧应影响
• 原理： 设置清除浮动之后，浏览器 会自动为元素添加一个上外边框，以保证其位置不受其他元素的影响。
• 解决高度塌陷的方案：

.clearfix::before,
    .clearfix::after {
      display: table;
      content: "";
      clear: both;
    }