1. 浮动

1.1 介绍

css浮动是一种使元素脱离文档流的方法，元素会根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止，其周围的元素也会重新排列。浮动是一种非常有用的布局方式，能够改变页面中对象的前后流动顺序。

1.2 浮动特性

1.文字环绕

2.浮动可以让块级元素同行显示

3.元素脱离文档流，父容器的高度塌陷

4.浮动元素可以让行内元素可以设置宽高

5.浮动元素可以设置margin，但是不能用margin:0 auto居中；

1.2.1 文字环绕

<div class="container">
  111测试文字测试文字测试文字222
  <div class="block block1">1</div>
</div>

block1设置浮动

1.2.2 块级元素同行

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

三个div均设置浮动

1.2.3 父容器高度塌陷

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

给 block2 和 block3 设置浮动可以看到，父容器的高度仅由block1撑起，无法包裹其他设置浮动的元素。

1.2.4 行内元素设置宽高

<div class="container">
  <span class="text">111测试文字测试文字测试文字222</span>
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

.text{
  float: left;
  border: 1px solid blue;
  height: 50px;
}

在设置浮动的情况下，height无效，设置之后height有效。

1.2.5 浮动元素设置margin

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

三个div均设置浮动

.block{
  height: 100px;
  width: 100px;
  float: left;
  margin: 0 10px;
}

设置margin

1.3 清除浮动

清除浮动，主要是针对浮动会导致父元素高度塌陷的特性。

1.3.1 父容器添加空元素并使用clear

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
  <div class="clear"></div>
</div>

.clear{
  clear: both;
}

父容器高度正常。

此方法缺点是引入了额外的元素。

1.3.2 使用::after伪元素

此方法与上一个方法原理一致，只是将插入空元素以css伪元素的方式实现。

"::after" 伪元素可以在元素的内容之后插入新内容。

给父容器添加clearFix类

<div class="container clearFix">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

css中添加

.clearFix::after{
  content: '';
  display: block;
  clear: both;
}

1.3.3 父容器后的元素添加clear

在父容器后添加一个div

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>
<div class="clear"></div>

.clear{
  height: 100px;
  background-color: blue;
  clear: both;
}

在设置clear属性之前：

设置clear之后：

可以看到，蓝色区域显示正确，但父容器的高度仍然是塌陷状态。

1.3.4 使用父容器BFC

可以为父容器设置overflow: hidden

<div class="container">
  <div class="block block1">1</div>
  <div class="block block2">2</div>
  <div class="block block3">3</div>
</div>

.container{
  overflow: hidden;
}

2. BFC

是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC(Block formatting context)：块级格式化上下文，形成独立的渲染区域，内部元素的渲染不会影响外界

2.1 BFC解决的问题

2.1.1 高度塌陷

上文已讲过，不再赘述

2.1.2 外边距合并

两个块级元素的上外边距和下外边距可能会合并为一个外边距，其值会取其中值大的那个，这种行为就是外边距折叠。重叠只会出现在垂直方向。

<div class="block block1">1</div>
<div class="block block2">2</div>

.block{
  height: 50px;
  width: 50px;
}
.block1{
  background-color: red;
  margin-bottom: 30px;
}

.block2{
  margin-top: 20px; // 主要修改这一属性
  background-color: green;
}

block1的margin-bottom为30px,可以对 block2 的 margin-top 进行修改，分别修改为 0px 20px 50px，效果如下: 可以看到垂直方向上的两个margin的效果，只会是其中最大值，分别为30px 30px 50px。

2.2 创建BFC

position: absolute / fixed
float: 不是 none
overflow: 不是 visible
display: inline-block / flex / grid
根元素

css-浮动清除、BFC