Float

[AILINGANGEL]

1.浮动的特点

设置元素的float不为none,会让一个元素脱离文档流，一旦设置之后会产生下面的效果:

1. 父元素塌陷(就是父元素无法包括住这个浮动元素)---浮动闭合问题
2. 浮动的元素会形成自己的BFC
3. 浮动的元素的margin不会参与合并
4. 浮动元素的z-index不会生效，不会生成堆叠上下文
5. 浮动不能和定位（fixed和absolute）一起使用，一起使用浮动失效定位生效
6. 浮动可以和relative定位一起使用，先浮动再定位
7. 正常文档流中的块元素会当浮动元素不存在 --- 浮动清除问题
8. 一旦元素(块元素和内联元素)浮动起来后，就会变成一个inline-block，要注意宽度问题

2.浮动元素定位规则

1. 尽量靠上(向父元素靠)
2. 尽量靠左（右）
3. 后边元素不超过前面元素的最高点
4. 后边元素不超过前面元素的最左边
5. 浮动元素尽量不超过包含快（自身的宽度本来就比包含快宽除外）
6. 浮动元素不超过所在行的最高点(主要针对图片)
7. 内联元素不出现在左浮动元素的左边，以及右浮动元素的右边，绕着浮动元素摆放

3.浮动出现的原因

浮动出现的原因就是为了布局，最早就是为了实现文字绕着图片环绕

4.浮动清除

正常文档流中的块元素会当浮动元素不存在，因此浮动元素会遮住块元素的一部分，如下

<div class="div1">
  ppppppp
  <div class="div2"></div>
  <div class="div3"></div>
</div>

.div1 {
  background-color: pink;
}

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

.div2 {
  float: left;
  width: 50%;
  height: 100px;
  background-color: black;
}

.div3 {
  width: 60%;
  height: 200px;
  background-color: green;
}

利用clear属性，这个属性只会对正常文档流中的块元素生效，让块元素下移到某一边或者某两边没有浮动元素为止

在div3上加上clear:both

5.浮动闭合

如果子元素浮动，父元素会塌陷，不能包括住子元素。浮动闭合就是让父元素撑大撑到可以包裹住其中的子元素

<div class="div1">
  ppppppp
  <div class="div2"></div>
</div>

.div1 {
  background-color: pink;
}

.div2 {
  float: left;
  width: 50%;
  height: 100px;
  background-color: black;
}

我们想让父元素变成下面这种效果:

方法一: 利用BFC,父元素设置overflow:hidden能触发BFC的都可以

• 注意设置成float导致的宽度问题

.div1 {
  overflow: hidden; //这里
  background-color: pink;
}

.div2 {
  float: left;
  width: 50%;
  height: 100px;
  background-color: black;
}

方法二: 利用父元素的after伪元素

• 其实就是利用浮动清除，块级的父元素默认的高度就是要包裹住里面的子元素，利用浮动清除让一个div下移动到两边都没有浮动元素就可以让父元素包裹住所有的元素了

.div1 {
  background-color: pink;
}

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

.div2 {
  float: left;
  width: 50%;
  height: 100px;
  background-color: black;
}