CSS 盒子浮动

1. 浮动(float)

---

1.1 CSS 布局的三种机制

网页布局的核心就是用 CSS 来摆放盒子

1. 标准流
   • 块级元素会独占一行，从上向下顺序排列；
   • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
2. 浮动：让盒子从标准流中浮起来，主要作用让多个块级盒子一行显示，控制左右
3. 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，配合 js 特效

---

1.2 浮动 (float)

作用：让多个盒子水平排列成一行、居左居右

语法：选择器 { float: 属性值; }

• left：元素向左浮动
• right：元素向右浮动

特点：

• 会浮在标准流的上层显示
• 不会占标准流盒子的位置
• 会转换为类似行内块的元素，但元素之间没有间隙

(1) 浮动元素与父盒子的关系

• 参照父盒子对齐
• 对齐边框、内边距以内

(2) 浮动元素与兄弟盒子的关系

• 浮动只会影响它后面的标准流盒子，不影响前面的标准流

---

2. 清除浮动

浮动的影响：在父级盒子不方便给高度的情况下，子盒子浮动就不占位置，最后父盒子高度为 0 就影响了下面的标准流盒子

2.1 额外标签法(隔墙法)

方法：浮动元素末尾添加一个空的标签（其他标签br等亦可）

例如：<div style="clear:both"></div>

缺点： 添加许多无意义的标签，结构化较差

---

2.2 父级添加 overflow 属性

方法：overflow: hidden | auto| scroll

• hedden：隐藏溢出的元素
• auto：添加滚动条显示滚动溢出内容
• scroll：添加横竖两个滚动条显示滚动溢出内容

缺点：无法直接显示需要溢出的元素

---

2.3 使用after伪元素清除浮动

额外标签法的升级版，不用单独加标签

方法：在父元素的选择器上调用即可

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

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

• 优点： 符合闭合浮动思想 结构语义化正确
• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

---

2.4 使用双伪元素清除浮动

方法：在父元素的选择器上调用即可

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

• 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

---

2.5 清除浮动总结

1. 父级没高度时
2. 子盒子有浮动
3. 影响下面布局了

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素（推荐）	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素（推荐）	结构语义化正确	由于IE6-7不支持:after，兼容性问题

---