（重点）浮动和清除浮动的四种方法：额外标签法、overflow、：after、双伪元素法

学习笔记

学习来源：黑马前端p169-188
学习进度：day6

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、传统布局的三种方式

实际开发中，一个页面基本都包含了这三种布局方式
网页布局的第一排列准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1.普通流

标准流：就是标签按照规定好默认方式排列
块级元素会独占一行，从上向下顺序排列
行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘自动换行

2.浮动

浮动float属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

3.定位

二、为什么需要浮动？

1.仅仅使用标准流，不能方便地布局页面，例如：
（1）很难实现让多个块级盒子水平排列成一行，虽然转换成行内块级元素可以实现一行显示，但是它们之间会有较大的空隙
（2）很难实现两个盒子左右对齐
2.浮动可以改变元素标签默认的排列方式，浮动最典型的应用：可以让多个块级元素一行内排列显示

三、浮动的排列特性（重难点）

特性：
1.浮动元素会脱离标准流，且浮动的盒子不在保留原先的位置（最重要）
2.浮动的元素会一行内显示并且元素顶部对齐，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
3.浮动的元素具有行内块元素的特性

四、浮动：3种最常见的布局方式

1.基本网页布局

2.

注意：
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余兄弟元素也要浮动
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，则其他盒子也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

五、为什么要清除浮动？

1.原因

1.有的父盒子的高度无法写死，理想的状态，子盒子有多少个，就把父盒子撑开
2.由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，给父级盒子高度为0时，会影响下面的标准流盒子

2.本质和策略

1.本质

2.策略
闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

六、清除浮动的方法（至少2种）

1.语法和方法

清除浮动的方法：

2.额外标签法

注意：新添加的标签必须是块元素，不能是行内元素

3.父元素overflow清除浮动

给父级添加overflow属性，将其属性设置成hidden、auto或scroll

优点：代码简洁
缺点：无法显示溢出的内容

4.父元素添加 ：after 伪元素法

代码：

.clear:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
.clearfix{  /* IE6、7专有 */
  *zoom:1;
  }

优点：没有增加标签，结构更简单，比较高级的写法
缺点：需要照顾一些低版本浏览器

5.父元素添加双伪元素

代码：

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

      .clearfix:after{
        clear: both;
      }

      .clearfix{
        *zoom:1;
      }

优点：代码更简洁
缺点：更需要照顾低版本浏览器

---

总结

例如：以上就是今天要讲的内容，本文介绍了浮动和清除浮动的方法