CSS笔记（七） 盒子模型------浮动

前言

今天这篇帖子具体讲了浮动，浮动对于我们的网页布局起到了很大的作用。

传统网页布局的三种方式：

网页布局的本质----用css来摆放盒子，把盒子摆到相应位置

css提供了三种传统布局方式（简单易懂就是盒子如何进行排列顺序）：

• 标准流（普通流/文档流）
• 浮动
• 定位

---

一、标准流（普通流/文档流）

所谓的标准流：就是标签按照规定好默认方式排列

提问：块级元素和行内元素以及行内块元素都有哪些

1.块级元素会独占一行，从上向下排列

• 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘则自动换行

• 常用元素：span、a、i、em等（下面的地址里包含了行内元素、块元素、行内块元素的帖子，不懂的快去看！！！！）
• 地址、

实际开发中，一个页面基本都包含了这三种布局

---

二、float浮动

文档流定位

1.那我们如何让多个块级盒子（div）水平无缝隙的排列成一行呢？ 

2.如何实现两个盒子左右两端对齐呢？

注意：网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动

1、浮动特性

1.浮动元素会脱离标准流（脱标）

脱离标准流的控制（浮）移动到指定位置（动），俗称脱标

浮动的盒子不再保留原先的位置

举个栗子：

当我没有给这两个盒子添加浮动时，是不是就是标准流，一个盒子占一行，上下来显示

 但是！！！

当我给第一个盒子添加浮动之后，顾名思义，盒子是不是就浮起来了，底下的位置就不再保留了，由蓝色盒子顶替，粉色盒子就压住蓝色盒子啦

效果如下图：

 

2.浮动的元素会一行内显示并且元素顶部对齐

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

注意！！如果要使三个盒子在一行毫无缝隙的排列在一起，就要让三个盒子都设置浮动属性

效果如下：

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

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后就会具有行内块元素的特性

举个栗子！

span是不是一个行内元素，当span没有设置浮动时它的显示区域只能由内容撑开

但是，当我们把浮动的元素给了span之后，来看一看 

 

 它的效果就和display: inline-block;转变成行内块元素是一样的

display: inline-block;

也就是说，如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度

当然啦，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定

---

float：left 左浮动

float：right    右浮动

拓展：

当父元素没有高度，子元素都浮动，就会引起父元素坍塌：（可以通过开启BFC来解决）

开启BFC方式：

 以下都是给父元素添加：

1.overflow的值不是visible的其他值	推荐使用
2.display值是inline-block 、table、table-cell、flex	可能会有缝隙，而且margin：0  auto;不会起作用
3.float的值不是none的其他值	因为父元素也浮动了，会影响布局

 

能解决哪些问题

	1.margin重叠问题
	2.浮动带来的父元素高度坍塌的问题
	后续还有很多关于BFC的知识点，将持续更新