CSS（四）-- 布局（浮动）

目录

• float浮动
  • 浮动的特点：
  • 简单总结：
  • 脱离文档流的特点
  • 浮动产生的问题（高度塌陷）
  • BFC（块级格式化环境）-- 解决高度塌陷
    • 元素开启BFC的特点
    • 如何开启BFC
    • clear
    • 使用after为伪类+clear解决高度塌陷（最好的方法）
    • 解决外边距重叠问题clearfix--重要

float浮动

• 通过浮动可以使一个元素相其元素的左侧和右侧移动

  • 使用float属性来设置于元素的浮动，只是在父元素的范围内，不会超出

• 可选值：

  • none（默认值）：元素不浮动
  • left：元素向左浮动
  • right：元素向右浮动

• 注意1：元素设置浮动以后，水平布局的等式遍不需要强制成立
  之前
  

  设置了float：left之后
  

• 注意2：元素设置浮动一否，会从文档流中完全脱离，不再占用文档流的位置

  • 所以元素下边的还在文档流中的元素会自动向上移动
    之前
    
    为绿色部分设置float后
    
    因为绿色部分脱离了文档流所以橙色部分移动到了绿色部分

  • 改进：将橙色部分也加上float：left
    

浮动的特点：

1. 浮动元素完全脱离文档点，不再占据文档流中的位置
2. 设置浮动以后元素会向元素的左侧或右侧移动
3. 浮动元素默认不会从父元素中移出
4. 浮动元素向左或向右移动时，不会超过他前边的其他浮动元素（浮动元素不会盖住其他的浮动元素）
5. 如果浮动元素的上边是一个没有浮动的块元素。则浮动元素无法上移
6. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和他一样高
7. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕的效果
8. 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离以后元素的一些性质也会发生变化

简单总结：

浮动目前来讲它的主要作用是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

脱离文档流的特点

• 块元素
  • 块元素不在独占页面的一行
  • 脱离文档流以后，块元素的宽度和高度默认都被内容撑开（内容多大就有多大）
• 行内元素
  • 行内元素脱离文档流以后会变成块元素，特点和块元素一样

浮动产生的问题（高度塌陷）

• 在普通布局中，父元素的高度默认是被子元素撑开的，当子元素浮后，其会完全脱离文档流，子元素从文档流中脱离会将无法撑起父元素的高度，导致父元素的高度丢失
• 父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱
• 所以高度塌陷是浮动不居中比较常见的一个问题，这个问题必须要处理

BFC（块级格式化环境）-- 解决高度塌陷

Block Formating Context

• BFC是CSS中隐含的属性，可以为一个元素开启BFC
  • 开启BFC钙元素会变成一个独立的布局区域

元素开启BFC的特点

• 开启BFC的元素不会被浮动元素所覆盖
• 开启BFC的元素子元素和父元素外边距不会重合（子元素的外边距传给了父元素）
• 开启BFC的元素可以包含浮动的子元素

如何开启BFC

以下是针对被塌陷的元素（父元素）

• 设置元素的浮动（不推荐）
• 将元素设置为行内块元素（不推荐）
• 将元素的overflow设置为一个非visible的值（不是很完美的解决方案，后面还有更好的）

overflow：hidden；//开启其BFC，使其可以包含浮动元素

clear

• 作用：清除浮动元素对当前元素所产生的的影响
• 可选值：
  • left：清除左侧浮动元素对当前元素的影响
  • right：清除右侧浮动元素对当前元素的影响
  • both： 清除两侧中影响最大的那侧
• 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，已使其位置不受其他元素的影响

使用after为伪类+clear解决高度塌陷（最好的方法）

• 理解
  使用box1的伪元素，

<style>
.box1{
      border: 10px red solid;
}

.box2{
      width: 100px;
      height:100px;
      background-color:#bfa;
      float:left;
}

.box1::after{
      content:"";//为其定义内容，让其存在
      display:block;//因为after伪元素初始为行内元素，所有将其设置为块元素
      clear:both;//通过clear清除浮动元素box2影响
}
</style>

<div class="box1 clearfix">
      <div class="box2"></div>
</div>

解决外边距重叠问题clearfix--重要

这个样式可以同时解决高度塌陷的外边距重叠问题，当你在遇到这些问题时，直接使用clearfix这个类即可

<style>
      .box1{
            width:200px;
            height:200px;
            background-color:#bfa;
      }

      .box1::before{
            content:'';
            display:table;
      }

      .box2{
            width:100px;
            height:100px;
            background-color:orange;
            margin-top:100px;
      }

      //改良版
      .clearfix::before,
      .clearfix::after{
            content:'';
            display:table;
            clear:both;
      }
</sryle>
<div class="box1">
        <div class="box2"></div>
</div>