CSS布局基础(待补充完整)
1 文档流
要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。
而正常文档流就是在不用样式控制之下，html元素的默认排版方式。它的规则如下：
- 自上而下排列，每个块元素独占一行，行内元素自左向右排列，不会独占一行
<div>独占一行</div>
从左向右<span></span><img />
这是在不使用 样式的请况之下正常排列方式。倘若使用样式改变了某些元素的位置，那么就称为脱离文档流。也正是因为如此，才能有丰富的页面布局方式。否则大家都只是遵循上述两种方式，那就太枯燥单一了。
2 浮动布局
float属性，一般情况下元素默认是不浮动的，一旦添加该属性，元素就会向右或者向左浮动。看例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
header {
border: 2px rebeccapurple solid;
}
p {
border: 3px greenyellow solid;
}
.float {
border: 1px red solid;
/* height: 100px; */
}
.float div:nth-child(1) {
border: 1px blue solid;
float: left;
}
.float div:nth-child(2) {
border: 1px black solid;
float: left;
}
.float div:nth-child(3) {
border: 1px green solid;
float: left;
}
</style>
<body>
<header>
<span>行内元素</span><span>不会导致高度塌陷</span>
<p>这是正常流文字文字</p>
</header>
<div class="float">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<p>这是浮动文字</p>
</div>
</body>
</html>
经过对比可以发现，在不使用浮动之前，三个盒子都按照块元素的正常文档流排列方式，并且父元素的高也随着他们的内容大小变化。而一旦使用了浮动元素。会发现几点变化：
- 三个盒子的块元素变为了行内元素的排列方式，按照浮动属性值自左向右
- 父元素的高度不在随他们变化，直接没有了高度，当然他们依然相对于父元素排列，只是没有将其撑开
这里也引入一个问题
2-1 父元素高度坍塌
出现于上述的那种情况，因为那三个盒子脱离了文档流。自己排布，他们虽然相对于父元素排布，但却不是父元素的正常文档流的内容，所以无法将其撑开，从而导致父元素的高度回缩，也就是坍塌。
2-2 文字环绕浮动
虽然浮动元素脱离了文档流，但并不是不对正常流文档元素产生影响。上述例子中，虽然没有把父元素撑开，但是与它同级的兄弟元素并不会直接跑到它上面去，而是在它之下按照一下两个规则排列
2-2-1 若是浮动元素后紧跟 -> h1 ~ h6、p
这一类段落标签会自动换行，并且自带内边距
- 这一类标签在页面中会紧贴在浮动元素下面 ( 这个紧贴不是边框紧贴！而是段落标签中的文字紧贴浮动元素 )，依然独占一行，并且里面的文字内容不会自动排到最左边，而是相对于最右边的浮动元素的后面
2-2-2若是浮动元素后紧跟 -> 其他块元素
这一类无论是否有内容，都不会排到浮动元素后面，而是直接相对于父元素按照正常文档流排列，好像是直接无视了之前的浮动元素一样，认为自己就是父元素之下的第一个子元素
- 同样若是这里面的文字与浮动元素有交集，那么也是按照之前的方式排列
当然内边距，外边距，边框这些属性在浮动元素之间，仅仅是在它们之间是生效的。与其他正常文档流不产生效果
2-3 清除浮动
嗯？为什么还要清除浮动？直接不浮动就行了啊？
其实这是给浮动元素之后的元素用的，并不是给浮动元素本身用的；之所以要这样，是因为紧跟在浮动元素后面的普通元素都会受到影响。就比如上述说的两种紧跟浮动元素之后排列的方式。我能不能让它不要忽视浮动元素，而是排在浮动元素之后呢？能不能让段落标签不这么紧贴着，而是以边框为基准排在浮动元素后面呢？答案是肯定的。
- **使用 claer: both; clear: left; clear: right;**就可以
- 使用之后紧跟在浮动元素之后的就不会乱排布，而是按正常文档流排布，不过是排在了浮动元素后面，就好似把浮动元素看成了普通的行内元素一样，不会无视它，也不会覆盖它了。
3 定位布局
这也是脱离文档流的一种方式，它通过显式的设置定位坐标及大小来实现
3-1 position:fixed
这个比较简单，是相对于浏览器而言，导航栏通常就这么用；直接脱离文档流，别的元素将会无视它并且挤上来
3-2 position:relative
相对于原来的位置定位，原来位置就是正常文档流的位置。而且周边元素不会挤上来，看似好像是它已经走了，但是原来的位置还完好无损的留着。
3-3 position:absolute
绝对定位，也是直接脱离文档流，别的元素将会无视它并且挤上来
3-4 position:static
默认定位，也是每一个元素的初始定位，也就是正常文档流
4 BFC
这个东西其实不是一个规范的知识点，它是一个规则概念。为了解决普通元素与普通元素之间，普通元素与浮动元素之间产生的属性混乱问题
它的定义就是，Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
4-1 触发 BFC
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
本文为原创文章，若文章内容出现抄袭雷同，请联系文章发布人或者网站管理员，我们将认真核实并及时删除。 除非另有说明，否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处，谢谢配合!