浮动与BFC

一、浮动

所谓的浮动：就是几个子元素脱离文本流，在父元素上一行排序
原理：给元素添加浮动后，会把右侧的空间做预留，给下一个元素添加浮动的时候，占据这个位置！
作用：让元素在父元素内部横向排序
属性：属性值 — float：left; lefy right none
1：特点：
1：脱离文本流，不占据空间 （不清除浮动的话，后面的文本流会直接补上该位置，浮动元素覆盖文本流元素）
2：多个元素添加浮动（外面需要一个父元素的存在，并且制定高度（否则需要清除浮动），而所有子元素都添加浮动形成一列）
3：浮动的子元素超过父元素的宽度的时候，被挤到下一行显示（从左开始再排序）
4：子元素添加浮动，而父元素没有添加高度，会造成高度塌陷

二、高度塌陷

所谓高度塌陷：就是父元素的高度出现崩塌的现象，使得布局乱套！ 以下有着几种高度塌陷的场景！
场景1：
height不设置 或 height:auto; 元素的高度是被内容撑开的！
问题：height不设置 或 height:auto；会存在问题：当内容极度减少的时候，容器的高度不会被撑开，
会影响整个板块的布局！
解决方法：添加一个最小高度，让容器保存一个最小高度，这样就算板块内的内容极度减少，也不会造成撑开了元素的高度！
而且当内容增加的时候，需要撑开内容！
给容器添加最小高度：min-height: ;
场景2：
就是父元素未添加高度，而子元素添加了浮动（并且依靠着子元素撑开父元素），造成高度塌陷
解决方法1：
给造成高度塌陷的父元素添加overflow:hidden; —因为触发了布局逻辑BFC
并且给父元素添加最小高度 —这样你的高度可以再随着子元素来撑开！
弊端：overflow:hidden; 超出会被隐藏掉
解决方法2：
给浮动元素的后面添加一个元素（同级元素-空标签），标签给他添加样式{clear:both }
弊端：添加了太多空元素，造成代码冗余，造成浏览器加载效率慢！
解决方法3： 万能清除法
给外围父元素添加一个最小高度；还有出现高度塌陷的父元素添加清除浮动！
.clear-fix::after {
content: “.”;
height: 0;
display: block;//化为块状，占有宽度
clear: both;//清除两本的浮动
overflow: hidden;//把content中.隐藏
visibility: hidden;//不可见的元素也会占据页面上的空间，隐藏留出空间，撑开父元素
}
.clear-fix{
zoom:1;//这是针对ie浏览器，解决高度塌陷
}
思路：浮动元素 - 浮动元素的父元素添加清除浮动 - 然后父元素的外围模块（父元素）添加最小高度
也就是浮动元素撑开父元素（高度不能固定），父元素再撑开外围模块！

场景3：
     子元素高度跟随父元素的高度变化！
     需求：给一个box设置为可视区的宽高100%，那么需要给父元素设置高度，也就是body,html设置为100%

二、BFC

BFC:纯概念 -> 布局逻辑规定
直译：块级格式化上下文 （ 就是一个独立的渲染区 ）
注：只有块状元素参与BFC布局逻辑
一：BFC的布局规则
a、内部的Box会在垂直方向，一个接一个地放置。
b、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的上下margin会发生重叠（按照最大margin值设置）
c、每个元素的margin box的左边， 与包含块border box的左边相接触
重点：以下三点！
d、BFC的区域不会与float的box（盒子）重叠。
e、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
f、计算BFC的高度时，浮动元素也参与计算

二：BFC的触发条件
a: 根元素(html)
b: float属性不为none
c：position为absolute或fixed
d: display为inline-block, table-cell, table-caption, flex, inline-flex
e: overflow不为visible(默认值)

三：BFC的应用：
1：解决高度塌陷
2: 防止margin上下重叠（了解）
解决margin上下重叠 （给box1 margin0bottom:50px 给box2包裹一个父元素，在给box2的子元素添加一个margin-top:100px；
则可以触发两个BFC，最终结果为150px间距）
3：完成自适应两栏布局 — （左侧宽度固定。右侧自适应）

（1）：左侧宽度固定，右侧自适应，实现自适应布局。

原理：就是把左边进行浮动，右边使用overflow:hidden触发BFC，在BFC之中，触发BFC的模块不会覆盖float的盒子元素，而浮动的元素是不占据空间的，于是原本蓝色模块占据了整个视口，但是触发了BFC，因此不会覆盖浮动元素的盒子！

  <div class="left">左</div>
  <div class="right">右</div>

方法1：
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .left {
      width: 200px;
      height: 100%;
      background: red;
      float: left;
    }

    .right {
      height: 100%;
      background: blue;
      /* 触发BFC  */
      overflow: hidden;
    }

方法2:：
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .left {
      width: 200px;
      height: 100%;
      background: red;
      float: left;
    }

    .right {
      margin-left: 200px;
      height: 100%;
      background: blue;
    }

（2）：左侧右侧宽度固定，中间自适应

思路：
布局：先左后右 – 最后是中间
样式：就是需要先设置作用的浮动，然后把中间自适应
有两种方法：
方法1：左右浮动，中间使用这个来触发BFC（overflow: hidden;），center部位占据整个视口，由于触发BFC，因此不会覆盖folat的盒子，就实现了两边浮动，中间自适应的布局！
方法2：左右浮动，中间使用margin 0 200px； 来填充这边的浮动区域留下的空间！
方法3：左右浮动，然后中间版块外面包裹一个盒子，盒子高为100%，然后里面的center-con使用padding撑开，也就是padding:0 200px；
注意点1：设置高自适应的时候，其父元素必须添加高度为100%，也就是body,html的高度为100%！
注意点2：布局先左边，右边，最后中间版块！这样的顺序—是避免中间版块直接布局独占一行，把后面的right挤下来，因此先.left — .right — .center!

方法1：

  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>

    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }
    .left {
      float: left;
      width: 200px;
      height: 80%;
      background: red;
    }

    .right {
      float: right;
      width: 200px;
      height: 80%;
      background: blue;
    }

    .center {
      margin: 0 200px;
      height: 100%;
      margin: 0 200px;
      background: orange;
    }

方法2：

    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .left {
      float: left;
      width: 200px;
      height: 80%;
      background: red;
    }

    .right {
      float: right;
      width: 200px;
      height: 80%;
      background: blue;
    }

    .center {
      overflow: hidden;
      height: 100%;
      margin: 0 200px;
      background: orange;
    }

方法3：

  <div class="left">1</div>
  <div class="right">2</div>
  <div class="center">
    <div class="center-con">4</div>
  </div>

    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .left {
      float: left;
      width: 200px;
      height: 80%;
      background: yellow;
    }

    .right {
      float: right;
      width: 200px;
      height: 80%;
      background: pink;
    }

    .center {
      padding: 0 200px;
      background: purple;
      height: 100%;
    }

    .center-con {
      width: 100%;
      height: 100%;
      background: orange;
    }

三、BFC实现两栏自适应布局

 <header>我是头部</header>
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
  <footer>我是尾部</footer>

    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    header {
      height: 10%;
      background: red;
    }

    .left {
      width: 200px;
      float: left;
      background: yellow;
      height: 60%;
    }

    .right {
      width: 200px;
      float: right;
      background: orange;
      height: 60%;
    }

    .center {
      margin: 0 200px;
      background: pink;
      height: 80%;
    }

    footer {
      height: 10%;
      background: blue;
    }