标准文档流 + display(显示和隐藏) + float(浮动)
标准文档流
一、标准文档流的特征
宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画
（1）空白折叠现象
（2）高矮不齐，底边对齐
（3）自动换行，一行写不满，换行写
二、行内元素和块级元素的区别
标准文档流等级森严，标签分为两种等级：行内元素和块级元素。
1、行内元素
（1）与其他行内元素并排；
（2）不能设置宽、高，默认的宽度，就是文字的宽度；
2、块级元素
（1）独占一行，不能与其他的任何元素并排
（2）能接收宽和高，如果不设置宽度，那么默认宽度是父类的宽度的100%
三、行内元素和块级元素的分类
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级
1、从HTML的角度来讲，标签分为：
文本级：p、span、a、b、i、u、em；
容器级：div、h系列、li、dt、dd；
PS：为什么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h系列和ul，p里面也不能放p。
2、从CSS角度讲，CSS的分类和上面很像，就p不一样：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素；
块级元素：所有的容器级标签都是块级元素，还有p标签；
三、行内元素和块级元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
display:none; 隐藏不占位置
display:block; 块级元素
display:inline-block; 行内块级元素
display:inline; 行内元素
1、块级元素转换为行内元素
通过设置：display: inline;
2、行内元素转换为块级元素
通过设置：display：block;
四、脱离标准文档流
标准流里面的限制非常多，导致很多页面效果无法实现，如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
display（显示和隐藏）
属性指:
<style> div{ /*用的多的是行内变块 块变行内用的不多*/ display:block; /* 块级标签 独占一行 可以设置宽高 不设宽度将撑满父亲 */ display: inline; /* 行内标签 一行内显示 可以设置宽高*/ display:inline-block; /*行内块 在一行内显示,可以设置宽高*/
display: none; /*不显示 隐藏 不在文档中占位置*/
visibility:hidden; /* 隐藏 在文档中占位置*/
height:0； /*设置高度为0，与visibility连用，不再占位置*/
} </style>
float（浮动）
一、浮动的特性
1) 浮动的作用 : 可以使元素脱离标准文档流 可以使元素并排显示(布局) 不在页面中占据位置
2) 浮动的特点: 第一个盒子会贴着父盒子的边, 第二个盒子会贴着第一个盒子.
3) 浮动带来的问题: 子盒子浮动, 不在页面占据位置, 如果父盒子不设置高度, 那么撑不起父盒子的高度(可能就为0了),页面就会出现紊乱.
4) 浮动特性:
♦ 脱离文档标准流，标签一旦设置浮动，能够品牌，并且不区分行内、块级元素，也能够设置宽高
♦ 收缩效果，即一个浮动元素，如果没有设置width，那么就自动收缩为文字的宽度（这点和行内元素很像）
♦ "字围"效果，文字浮动后，文字会贴着盒子，不会压盖盒子
♦ 设置浮动,任意的标签,都可以设宽高
♦ 浮动的元素会相互贴靠
总结: 遵循一个元素，永远不要一个盒子单独浮动，要浮动一起浮动, 有浮动, 就要有清除浮动.
二、浮动的样式
<style> div{ div{ /*脱离文档标准流, 作用:实现元素并排*/ /*一排中的子盒子 要浮动都浮动 要不浮动都不浮动*/ float:none; /*不浮动*/ float:left; /*左浮动*/ float:right; /*右浮动*/ } } </style>
三、清除浮动
为了解决浮动带来的问题,需要清除浮动. 清除浮动有三种方式
1、固定高度
给父盒子设置高度,但是后期不好维护.
2、clear:both; (内墙法)
给浮动元素的最后面加一个空的块级标签(标准文档流中的块级标签),
给当前这个标签设置一个 clearfix 的类名, 设置该标签属性 clear:both;
问题: 每一个都添加一个div 或 p 容易造成数据冗余
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>123</title> <style> .clearfix{ clear:both; } </style> </head> <body> <div class="father"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <!-- 内墙法 添加一个新的div 用于clear.both --> <div class="clearfix"></div> </div> </body> </html>
3、伪元素清除法 （常用）
给设置浮动的标签的 父标签来设置 clearfix 类名, 用伪元素的 after 在该标签内部添加内容,并设置
该方法重点,且常用.
<style> .clearfix:after{ /* 添加点之后,清除浮动(不允许点的左右有浮动,那么点会自动换行,) 然后设置隐藏,高度为0, 即撑起了父标签的高度 */ content: '.'; clear:both; display: block; visibility: hidden; height: 0; } </style> <body> <div class="box"> <div class="father clearfix"> <!-- 以下三个标签都是浮动性的, 给其父标签设置类名 clearfix --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </div> </body>
4、overflow 清除浮动 （常用）
overflow:hidden;
<style> .father{ width: 500px; /* 设置overflow:hidden */ overflow: hidden; } </style>
<div class="box"> <div class="father"> <!-- 以下三个标签设置了浮动 清除浮动给父标签设置 overflow:hidden 样式即可--> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> </div>
补充（overflow）:
overflow属性规定当内容溢出元素框时发生的事情
|
overflow的值 |
描述 |
|
visible |
默认值，内容不会被修剪，会呈现在元素框之外 |
|
hidden |
内容会被修剪，超出元素框之外的部分不可见 |
|
scroll |
不管内容是否超出元素框都出现滚动条 |
|
auto |
如果内容超出元素框，则浏览器会显示滚动条以便查看其余内容 |
|
inherit |
规定继承父元素的overflow属性的值 |
其实它是一个BFC区域：参考：https://blog.csdn.net/riddle1981/article/details/52126522
