摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。
在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。
上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。这篇我们继续...
上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。
1.1 文档流
文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。
1.2 定位
定位允许你使用 position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。
根据 position 属性的取值，元素可以分为静态定位元素static（默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。
首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。
当我们使用定位时，需要position属性和top,left,right,bottom这两类属性共同参与来决定一个元素的 定位类型 和 偏移量 。
使用方法很简单，这里说下他们之间的区别:
- relative相对定位
- 元素根据其在当前文档流所在位置作为参考系，进行偏移。
- 定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。
- absolute绝对定位
- 元素会将其带有position为非static的祖先元素作为参考系进行偏移。
- 如果祖先元素里没有带有position为非static的，则会以首屏作为参考系。
- 定位后，原来在文档流中占据的位置，会被其他元素所占据。
- fixed固定定位
- 根据当前可视区进行定位，所以当文档流为多屏可滚动时，fixed定位的元素会跟随滚动而滚动。
- 跟absolute定位一样，定位后，原来在文档流中占据的位置，会被其他元素所占据。
1.3 包含块
包含块就是个专有名词，其实概念很简单，这里了解一下就好。
包含块是一个矩形区域，当元素设置属性的百分比的时候，比如width：50% 或者 top: 10%，其参考系就是他的包含块。
- 大部分时候对于文档流里的元素，其包含块指的都是其父元素的区域。
- 对于定位元素来说，相对定位元素包含块也是其父元素区域；
- 绝对定位元素的包含块是其带有position为非static的祖先元素区域。如果其没有这样的祖先元素的话其包含块为首屏显示区域，这个区域也有个专有名词叫做
初级包含块。- 固定定位元素的包含块就是当前可视区的区域。
1.4 浮动
浮动允许你将元素浮动起来，脱离文档流向左或者向右移动。直到它的外边缘碰到包含框或另一个浮动框的边框为止。
虽然浮动也脱离文档流显示，但是与定位不同的是 inline 和 inline-block 的元素可以识别这种因浮动而脱离的文档流，从而不发生重叠。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.float {
width: 40px;
height: 40px;
background: blue;
float: left;
}
p{
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
style>
head>
<body>
<div class="float">div>
<p>LearnInPro LearnInPro LearnInProp>
body>
html>
我们会发现p元素并没有占据掉浮动元素的位置，然后我们将上面的代码稍作修改，将p元素的display改为block我们就会发现
虽然这样p标签占据了float元素的位置，但是标签里面的文本则不会去占据float元素的位置。
这个设定其实是有些诡异的。另外说一句，在css历史上浮动这个东西一开始被造出来是为了实现文字围绕图片这种效果的而不是用来做布局的，当时只有图片可以设置浮动效果，但是后来慢慢所有元素都可以浮动并且基于浮动有了自己的布局体系，所有由于历史原因相对来说浮动的规则是比较乱的小部分还有些诡异的。有些地方我们记住就好。
我们来具体看下浮动的规则：浮动元素会从最后一行最左侧的空白位置开始浮动，如当前行无法容纳下自己宽度，则垂直下沉到下一行，向左或者向右碰到包含框或另一个浮动框的边框为止。我们这里举两个例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.float{
width: 30%;
height: 40px;
border: 1px solid black;
float: left;
}
style>
head>
<body>
<div class="float">flaot1div>
<div class="float" style="height: 60px;">flaot2div>
<div class="float">flaot3div>
<div class="float">flaot4div>
body>
html>
这里float4在float3右侧空白位置起始，发现当前行无法容纳下自己则垂直向下到下一行，向左移动，在碰到包含块之前，碰到了float2的边框，于是就会在float2的右边框处停止浮动。
之后我们将代码稍作修改，把float5这行注释删掉，我们会发现，一开始float5的起始位置就是在float4这行的右侧空白区域，当前行可容纳下自己，于是就停在了float4的右侧。虽然第一行也就是float3这行右侧空白区域也空着，可以放得下float5，但是float5的起始位置并不会在第一行，所以最终即使第一行有位置可以显示下float5，它也不会在那里显示。
1.4 清除浮动
首先为啥要清除浮动？
由于浮动元素会脱离文档流显示，所以在浮动元素后面的块级元素会默认占据这些元素的位置，就会造成这些块级元素会在浮动元素的下层显示，出现浮动元素盖住后面正常文档流元素的效果，但这往往不是我们想要的结果。
其作用是改变 使用清除浮动的这个元素 与 前一个声明的浮动元素 之间的默认布局规则，让 使用清除浮动的这个元素 在新的一行中显示。
如何清除浮动
clear属性，其值为left | right | both。
浮动元素或者非浮动元素的块级元素都可以使用这个属性来清除浮动（我们之前说inline和inline-block元素可以自动识别浮动，所以他们不需要清除浮动）， 他们的作用对象是前一个声明的浮动元素。如果使用 clear:left | right 则是清除前一个float为left或者right的元素的浮动，clear：both则是清除前一个浮动元素，无论它是向哪边移动。那么使用clear属性的元素会在浮动元素的下方新开一行显示。
清除浮动的特殊应用
清除浮动可以解决父元素高度塌陷问题。当一个元素包裹了一些float元素的时候，由于float元素脱离文档流显示，所以父元素无法被这些元素撑开高度，导致父元素高度为0。
那么最常用的一种解决方案是：设置父元素的after伪元素的clear属性 来让其撑开父元素的高度。
Document
float
- 当我们没有设置clearfix的after伪元素时，会发现clearfix的高度为0，只有边框会显示出来。我们通过设置clearfix的after伪元素来让我们在不需要新增标签的情况下就可以清除掉浮动，并且clearfix类还可以复用。
- 注意点：
- content和display属性会将after伪元素渲染出来，加上clear: both实现一个真实标签清除浮动的效果。
- 在一般浏览器中不设置visibility和height是没有问题的，但为了增加代码健壮性和规范性，建议加上。
- :after 和 ::after的区别：:after的写法是css2的，可以兼容到IE8，::after的写法是css3中规定的，用以区分伪类(:hover)和伪元素(::before)。
定位与浮动的相关知识点就讲的差不多了，下篇文章会去讲下merge的一些问题 和 格式化上下文(formatting context) ， 继续把css布局篇完成。
最后你觉得我们的文章对你有帮助，欢迎关注我们的 微信公众号LearnInPro，在上面你可以第一时间获取到我们的技术文章，并且你可以随时在上面向我们提问，把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题，希望
LearnInPro可以伴随你从入门到专家。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2244.html
摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...
深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分类，行框，定位与浮动等知识点。今天呢，我们把css布局篇做一个结尾，最后...
摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
阅读 1001·2021-11-25 09:43
阅读 1671·2019-08-30 13:59
阅读 1587·2019-08-30 11:22
阅读 2121·2019-08-30 11:06
阅读 1298·2019-08-28 17:51
阅读 3716·2019-08-26 12:12
阅读 776·2019-08-26 12:11
阅读 442·2019-08-26 12:10
