css --- > [读书笔记] 浮动(float) 与 清除浮动

说明

• 源代码
• 学习

---

1. 浮动

1.1 CSS布局的三种机制

网页布局的核心 — 利用 CSS 来摆放盒子

CSS提供了3种机制来设置盒子的摆放位置: 标准流、浮动和定位.

1. 标准流:
   • 块级元素(div、hr、p、h1~h6、ul、ol、dl、form、table)会独占一行,从上向下顺序排列
   • 行内元素(span、a、i、em)按照顺序从左到右排列,遇到父元素边缘自动换行
2. 浮动:
   • 让多个盒子一行显示
3. 定位:
   • 将盒子定在浏览器的某一个位置

1.2 浮动

1.2.1 让多个盒子在同一行显示

div{
    float: left;
}

• 元素的浮动式值: 设置了浮动属性的元素会: 脱离普通标准流、移动到指定位置.

1.3 什么是浮动(float)

• 浮动: 会改变float属性的display属性(会变为类似于inline-block)

div{
    width: 200px;
    height: 200px;
    background-color: pink;
}

• 注意: 浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些盒子,多出的盒子会另起一行对齐

1.4 浮动的目的(float)

我们使用浮动的核心目的 — 让多个块级盒子在同一行显示.

1.5 浮动的应用

浮动和标准流的父盒子搭配

我们直到,浮动式脱标的,会影响下面的标准流元素,此时,我们需要给浮动的元素添加一个标准流的父亲,这样,最大化的减小了对其他标准流的影响.

一个完整的网页,是 标准流 + 浮动 + 定位

1.6 浮动的扩展

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

• 子盒子的浮动参照父盒子对齐
• 不会与父盒子的边框重叠,也不会超过父盒子的内边距

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

在一个父级盒子种,如果前一个兄弟盒子是:

- 浮动的,那么当前盒子会与前一个盒子的顶部对齐
- 普通流,那么当前盒子会显示在前一个兄弟盒子的下方

浮动只会影响当前的或者后面的标准流盒子,不会影响前面的标准流

建议:如果一个盒子里面有多个盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动

---

2. 为什么要清除浮动

2.1 为什么要清除浮动

因为父级盒子很多情况下,不方便给高度,但是盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子.

• 总结：
  • 由于浮动元素不再占用文档里的位置,所以它会对后面的元素排版产生影响
  • 准确地说,并不是清除浮动,而是清除浮动后造成的影响

2.2 清除浮动的本质

清除浮动主要是为了解决父级元素因为子级元素浮动引起内部高度为0的问题

2.3 清除浮动的方法

清除浮动只会,父级就会根据盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

• 语法:

选择器{clear: both;}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

但是我们实际工作做那个,几乎只用 clear: both

1) 额外标签法(隔墙法)

W3C推荐的做法是通过在浮动元素末尾添加一个空的标签<div style="clear: both">,或其他标签br等亦可

• 优点: 通俗易懂,书写方便
• 缺点: 添加许多无意义的标签,结构化较差

2) 父级元素添加overflow属性方法

可以给父级添加: overflow为 hidden| auto | scroll 都可以实现

• 优点: 代码简洁
• 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素

3) 使用after伪元素清除浮动

:after方式为空元素额外标签法的升级版,好处是不再单独加标签了

使用方法:

.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.claerfix {
    *zoom: 1;			/* ie6,7清除浮动的样式 */
}

• 优点: 符合闭合浮动思想,结构语义化明确
• 缺点: ie6~7不支持after

4) 使用双伪元素清除浮动

使用方法:

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

• 优点: 代码更简洁
• 缺点: 由于IE6~IE7不支持:after, 使用zoom:1触发hasLayout.

2.4 清除浮动总结

1. 父级没高度
2. 子盒子浮动
3. 影响兄弟元素布局

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂,书写方便	添加许多无意义的标签,结构化较差
父级overflow: hidden	书写简单	溢出隐藏
父级伪元素	结构语义化正确	兼容性问题(ie6~ie7)
父级伪元素	结构语义化正确	兼容性问题(ie6~ie7