浮动

网页布局第一准则：多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

浮动

1float: none | left | right;
2
3none 不浮动（默认值）
4left 左浮动
5right 右浮动

什么是浮动？

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

浮动最开始产生的原因是实现 图文环绕：浮动的元素不会遮挡文字,文字会被向右推出。
浮动特性
- 浮动元素会脱离标准流,不再保留原先的位置。
- 浮动的元素会一行内显示,可以设置宽高并且元素顶部对齐
  - 注意：浮动的元素是互相贴靠在一起的（不会有缝隙）,如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
- 浮动的元素会具有行内块元素的特性
- 浮动元素的大小根据内容来决定
- 浮动元素不能通过text-align:center或者margin:0 auto让浮动元素水平居中。
浮动元素经常和标准流父级搭配使用
浮动布局注意点
- 浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
- 一个元素浮动了,理论上其余的兄弟元素也要浮动。 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

清除浮动

1clear: left | right | both;

为什么需要清除浮动? 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。
本质：清除浮动的本质是清除浮动元素脱离标准流造成的影响：浮动的子标签无法撑开父盒子的高度
注意:
- 如果父盒子本身有高度,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度,就不会影响下面的标准流了
清除浮动策略是?
- 闭合浮动。只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。
清除浮动的多种方式
1. 直接设置父元素高度
- 优点：简单粗暴,方便
- 缺点：仅限于父元素的高度是固定的
1. 额外标签法（隔墙法）在父元素内容的最后添加一个块级元素,并给添加的块级元素设置clear: both,或者在父元素内容的最后添加一个<br />标签。
```
1<div style="clear:both"></div>
2<br clear='all'>
```
- 优点：通俗易懂,书写方便
- 缺点：添加许多无意义的标签,结构化较差
- 增加无意义的标签,不推荐使用。
1. 给父元素添加 overflow 属性
```
1overflow: hidden | auto | scroll;
```
- 可以给父级添加
- 优点：代码简洁
- 缺点：无法显示溢出的部分
1. 单伪元素清除法
```
1.clearfix::after {  //::after 方式是额外标签法的升级版,给父元素添加。
2	content: "";
3	display: block;
4	clear: both;
5	height: 0;  //高度为0,不占任何空间。（浏览器兼容性,有些浏览器伪元素会有默认高度）
6	visibility: hidden;  //隐藏元素,继续占有原来位置,在网页中看不到伪元素,因为有些浏览器伪元素默认是一个圆点。
7}
8
9.clearfix { /* IE6、7 专有 */
10  /*zoom是IE里的特有的属性,IE不支持伪元素,IE里zoom设置为1就是清除浮动*/
11	*zoom: 1;
12}
```
- 优点：没有增加标签,结构更简单,直接给父元素标签加类即可清除浮动。
- 缺点：照顾低版本浏览器
- 代表网站：百度、淘宝网、网易等
1. 双伪元素清除法
```
1//给父元素添加
2.clearfix::before,
3.clearfix::after { 
4	content:"";
5	display:table;
6}
7.clearfix::after {
8	clear:both;
9} 
10.clearfix {
11	*zoom:1;
12}
```
- 优点：代码更简洁
- 缺点：照顾低版本浏览器
- 父子标签都是块级,子级加margin会影响父级的位置。::before解决外边距塌陷问题
（扩展补充）BFC的介绍
- 块格式化上下文（Block Formatting Context）：BFC
  - 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
- 创建BFC方法：
  1. html标签是BFC盒子
  2. 浮动元素：float除none以外
  3. 行内块元素是BFC盒子
    - display 为 inline-block、table-cells、flex
  4. overflow属性取值不为visible
  5. 绝对定位元素：position（absolute、fixed）
- BFC盒子常见特点：
  - BFC盒子会默认包裹住内部子元素（标准流、浮动）------- 应用：清除浮动
  - BFC盒子本身与子元素之间不存在margin的塌陷现象------- 应用：解决margin的塌陷

浮动#

清除浮动#

浮动

清除浮动