CSS浮动

多个块级元素纵向排列找标准流，横向排列找浮动。

1 普通流（标准流）

1.1 定义

标准流就是标签按照规定好默认方式排列。标准流是最基本的布局方式。

1. 块级元素会独占一行，从上到下顺序排列。如：div、hr、p、h1 - h6, ul , ol , form , table
2. 行内元素会按照顺序，从左往右排序,如：span, a, i ,em

2 浮动

2.1 为什么需要浮动？

• 有很多布局效果，标准流没有办法完成。比如：多个块级盒子一行没有缝隙排列。
• 浮动，可以改变元素标签的默认排列方式。
• 浮动最初产生的目的：做文字环绕。

2.2 什么是浮动？

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

• 语法：{float: 属性值}

  

2.3 浮动特性

1. 设置了浮动的元素，脱离了标准流的控制（简称“脱标”）。浮动的盒子不再保留原来的位置。

   

2. 如果多个盒子都设置了浮动，则他们会按照属性值，一行显示并且顶端对齐排列。

   • 注意：浮动的元素是互相贴在一起的（不会有缝隙），如果父级元素装不下这些浮动的盒子，多出的盒子会另起一行对齐。

     

3. 设置了浮动的元素，会具有行内块元素的特性

   • 块级元素，没有设置宽度时，默认宽度和父级一样。但是添加浮动后，他的大小根据内容来决定。
   • 行内元素，添加浮动后，就可以直接设置高度和宽度。

4. 浮动不会压住它下面标准流盒子里的文字。因为他最初设置的目的就是为了做文字环绕。

2.4 浮动布局的注意点

2.4.1 浮动和标准流父级搭配使用

为了约束浮动元素的位置，我们一般采取的策略是：先用标准流的父元素排列上下位置，之后内部元素采取浮动，排列左右位置。

2.4.2 一个元素浮动了，理论上其余的兄弟元素都应该浮动

浮动的盒子，只会影响他后面的标准流，不会影响前面的标准流。因为前面的标准流已经独占一行了

2.5 清除浮动

2.5.1 为什么需要清除浮动？

在某些情况下，如：文字长短不定，列表展示高度不定。父盒子不方便给高度。

但是子盒子浮动又不占有位置，最后会导致父盒子不占用原文档流的位置，高度为0，会影响后面的元素排版。

2.5.2 清除浮动的本质

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响后面的元素排版了。

2.5.3 清除浮动的方式

• 语法：{clear: 属性值}，实际工作中，几乎只用clear:both

  

1 额外标签法

• 定义： 额外标签法也称之为隔墙法， 是W3C最推荐的做法。

• 使用：在浮动元素末尾添加一个空的标签，例如：<div style="clear: both"></div>

• 优缺点：

  • 优点：通俗易懂，书写方便
  • 缺点：增加了无意义的标签，结构化差

2 给父级添加overflow

• 使用：给父级添加overflow属性，将其属性值设置为：hidden, auto 或 scroll
• 优缺点：
  • 优点：代码简介
  • 缺点： 无法展示溢出的部分

3 :after 伪元素法

• 使用：after方式是额外标签法的升级版。只需要给父类元素添加：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /*IE6,IE7*/
    zoom: 1;
}

• 优缺点：
  • 优点：没有增加标签，结构简单
  • 缺点：需要照顾低版本浏览器
• 代表网站：百度，淘宝，网易

4. 双伪元素法

• 使用：父元素添加：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    /*IE6,IE7*/
    zoom: 1;
}

• 优缺点：
  • 优点：代码更简洁
  • 缺点：需要照顾低版本浏览器
• 代表网站：小米，腾讯